Facoltà di Scienze MM. FF. NN. Università di Verona A.A. 2008-09 Interazione Uomo-Macchina e Multimedia Introduzione alle interfacce utente Gloria Menegaz Interazione Uomo-Macchina e Multimedia 1
Le interfacce grafiche: sommario Cos è e cosa vuol dire HCI Perché un informatico deve occuparsi di HCI L importanza del progetto di una buona interfaccia utente Perché le interfacce sono spesso trascurate Sei regole per valutare il progetto di interfacce Gloria Menegaz Interazione Uomo-Macchina e Multimedia 2
Cos è e cosa vuol dire HCI HCI = Human-Computer Interaction Studio e sviluppo di interfacce al computer con l obiettivo di rendere più semplice il loro utilizzo HCI coinvolge: studio delle persone che usano interfacce sviluppo di nuove applicazioni per gli utenti sviluppo di nuovi dispositivi e strumenti per gli utenti Gloria Menegaz Interazione Uomo-Macchina e Multimedia 3
Perché un informatico deve occuparsi di HCI Un informatico può occuparsi di: sviluppo di nuove applicazioni sviluppo di nuovi strumenti da usare nella applicazioni, eg., grafica tridimensionale o linguaggi di programmazione visuali sviluppo di sistemi operativi e di sistemi di comunicazione tuttavia la struttura di un sistema influisce sul progetto della sua interfaccia; gli oggetti forniti dal linguaggio visuale influiscono sul progetto dell interfaccia con quel linguaggio; il comportamento dei dispositivi di input e display influisce sulle interfacce che ne fanno uso Gloria Menegaz Interazione Uomo-Macchina e Multimedia 4
Sistemi SW Dispositivi I/O Cos è un interfaccia grafica? Algoritmi computer User interface utente Documentazione Vista dal progettista la funzionalità dell applicazione è separata dal UI UI è spesso vista come un aggiunta Training Ambiente sociale e lavorativo Vista dall utente non distingue tra UI e applicazione sottostante se la UI è ben progettata e usabile, l intera applicazione appare usabile Gloria Menegaz Interazione Uomo-Macchina e Multimedia 5
Una UI include tutti gli aspetti di progetto di un sistema che influenzano l interazione tra il sistema stesso e l utente. In particolare: la corrispondenza con i task dell utente la metafora usata (eg., desktop) i controlli e comportamenti navigazione entro una schermata e flusso tra schermate integrazione tra differenti applicazioni il progetto visuale delle schermate il progetto di interazioni audio non verbali Gloria Menegaz Interazione Uomo-Macchina e Multimedia 6
L avanzamento della tecnologia I nuovi prodotti tecnologici hanno accresciuto la necessità di migliori UI e miglior progetti di UI: reti e sistemi distribuiti permettono l accesso remoto di informazioni memoria a potenza di calcolo è ora disponibile a costi ridotti più persone hanno accesso a maggior potenza di calcolo Ora tale tecnologia esiste MA tale tecnologia non produce da sola interfacce usabili UI grafiche (GUI) non sono intrinsicamente più usabili delle tradizionali interfacce a caratteri (CUI) GUI possono essere meno usabili se progettate male UI usabili richiedono un oculato progetto. Gloria Menegaz Interazione Uomo-Macchina e Multimedia 7
L importanza del progetto di una buona UI Aspetti da considerare Riduzione dei costi di stesura del codice Costi elevati per i problemi legati all interfaccia Errori nell interfaccia possono causare danni fatali Buone interfacce fanno vendere il prodotto sottostante L uso sempre maggiore dei computer Gloria Menegaz Interazione Uomo-Macchina e Multimedia 8
Codice per UI Una UI richiede dal 40% al 90% del codice totale, in media un 70%; se fatta male deve essere completamente rifatta, altrimenti il costo passa agli utenti Una GUI richiede almeno il 29% del budget di progetto di sviluppo SW Gloria Menegaz Interazione Uomo-Macchina e Multimedia 9
L economia delle UI Le UI sono la chiave della funzionalità di un sistema le UI mal fatte possono rendere impossibile agli utenti l accesso alle funzionalità che richiedono e li rendono meno produttivi Il capitale umano è sempre più importante, quindi esiste la necessità di UI facili da imparare e usare, efficienti, memorizzabili, non soggette ad errori, soddisfacenti per l utente. Buone UI possono fornire: maggiore produttività costi ridotti di addestramento e di supporto minori errori dell utente Gloria Menegaz Interazione Uomo-Macchina e Multimedia 10
costi ridotti di produttività una volta installato il sistema Ridotto turnover degli impiegati riduzione del lavoro necessario per soddisfare le richieste dell utente elevata capacità di trasferimento delle competenze tra applicativi soddisfazione dell utente piena utilizzazione della funzionalità dell applicazione produzione di più elevata qualità La qualità aumenta perchè l utente spreca meno tempo nell interfaccia e più per risolvere il problema specifico La UI corrisponde al modi di operare/pensare dell utente relativamente al problema Gloria Menegaz Interazione Uomo-Macchina e Multimedia 11
La UI aggiunge valore alla soluzione del problema, eg., modi diversi di vedere i dati Buone interfacce fanno vendere i sistemi (Xerox PARC Mac Windows) Cattive interfacce fanno apparire meno buoni sistemi che sono ottimi per le loro funzionalità. Esempi: 20 utenti che lavorano per 230 giorni/anno x 100 schermate/giorno, se l UI permette di risparmiare 10 sec/schermata si ha un risparmio di 1278 h (32 settimane); se 500 utenti fanno 20 errori/anno e impiegano 15 min/errore, si hanno 2500 ore sprecate (63 settimane) Gloria Menegaz Interazione Uomo-Macchina e Multimedia 12
Problemi relativi alle UI Esistono casi nei quali applicativi costosi non sono stati usati dal personale addetto perché inusabili e difficili da memorizzarne il funzionamento. Un altro caso in cui un applicativo richiedeva 6 mesi di addestramento quando il tempo medio di un impiegato per eseguire quel compito era 18 mesi. Gloria Menegaz Interazione Uomo-Macchina e Multimedia 13
Anche errori fatali: l avviso di una bomba al Centennial Park durante le Olimpiadi di Atlanta ha richiesto 20 minuti per avvisare le organizzazioni competenti perché il sistema richiedeva l indirizzo del parco e gli operatori non trovavano nessuno che lo sapesse... la bomba doveva scoppiare in 30 minuti! La caduta di un aereo in Colombia nel 1996 è stata dovuta alla richiesta del pilota al sistema di dirigersi verso un aeroporto che iniziava per la lettera R, ma che non era quello voluto. Gloria Menegaz Interazione Uomo-Macchina e Multimedia 14
Ubiquità dei computer Il motore negli anni 30 era considerato come il computer oggi Interfacce basate su computer (processore, memoria) sono posti in numerosi prodotti meccanici: classico problema di fissare l ora del videoregistratore; gli utenti spesso non sanno usare macchine fotocopiatrici, fax, registratori cassa, lavatrici, bancomat, telefoni le automobili possono essere completamente controllate da processori (centraline elettroniche) Gloria Menegaz Interazione Uomo-Macchina e Multimedia 15
Perché le interfacce sono mal fatte? Addestramento inadeguato del personale che progetta interfacce La diversità di conoscenze da acquisire per progettare buone interfacce Rapidi avanzamenti tecnologici Riluttanza delle industrie a dare risorse per le UI Cattiva gestione delle risorse: i programmatori non parlano con il gruppo di progettisti delle UI/gruppo utenti e viceversa. I specialisti di interfacce sono coinvolti raramente I programmatori sono lasciati liberi di costruire interfacce secondo regole di default Gloria Menegaz Interazione Uomo-Macchina e Multimedia 16
Regole per valutare il progetto di UI Principi di ingegneria cognitiva basati sulla psicologia dell utente. Sebbene gli utenti siano individui distinti, hanno architetture simili: capacità di apprendimento e memoria; prestazioni motorie, visuali e uditive. Tali concetti e processi possono essere usati per definire principi generali di progetto di UI. Gloria Menegaz Interazione Uomo-Macchina e Multimedia 17
Caratteristiche di base dell essere umano Agli essere umani piacciono problemi risolvibili Agli essere umani non piacciono problemi irrisolvibili Gli essere umani sono sempre in fase di addestramento (learning) Il learning è difficile Gli essere umani usano conoscenza a priori (prior learning) per supportare nuovo addestramento. Gloria Menegaz Interazione Uomo-Macchina e Multimedia 18
Cosa non va in questa interfaccia per videoconferenza? Gloria Menegaz Interazione Uomo-Macchina e Multimedia 19
Perché questa è migliore? Riprogetto della stessa interfaccia Gloria Menegaz Interazione Uomo-Macchina e Multimedia 20
Caratteristiche di base dell utente Agli utenti non piace leggere manuali, ma lavorano copiando e chiedendo Gli utenti costruiscono sempre modelli del loro mondo Implicazioni: progettare interfacce che permettono l addestramento solo usandole; progettare interfacce che forniscono modelli corretti; progettare interfacce che si basano su addestramenti precedenti. Gloria Menegaz Interazione Uomo-Macchina e Multimedia 21
Inoltre, agli utenti non importa se qualcosa non ha senso, essi costruiscono il loro modello per dargliene uno. Gli utenti preferiscono modelli semplici. L inconsistenza non infastidisce l utente. Gli utenti cercano di cavarsela come possono con le interfacce Gloria Menegaz Interazione Uomo-Macchina e Multimedia 22
Caratteristiche di una buona interfaccia L interfaccia utente deve favorire l utente, eg., rendere ogni operazione visibile (affordance); deve rendere ovvia la relazione tra l azione del sistema e l azione svolta dall utente (mapping); deve fornire una retroazione all azione dell utente (feedback); fornisce un buon modello concettuale del comportamento del sistema sottostante; fornisce funzioni vincolanti (per prevenire errori dell utente); supporta l addestramento automatico, ie., fornisce competenze e pratiche per aiutare l utente ad acquisire le funzionalità dell interfaccia. Gloria Menegaz Interazione Uomo-Macchina e Multimedia 23
Affordance Affordance (fruibilità): caratteristica per cui le proprietà percepite e reali di un oggetto aiutano l utente a determinare come usarlo o interagire con lui. Esempio: bottoni che indicano all utente che possono essere schiacciati Gloria Menegaz Interazione Uomo-Macchina e Multimedia 24
Mapping Mapping: la relazione tra l uso di uno strumento e la conseguente azione del sistema sottostante. Buon esempio: la presentazione di un font da selezionare mediante la visualizzazione della forma e composizione del font. Cattivo esempio: in generale i tasti funzione dove la relazione è arbitraria. Gloria Menegaz Interazione Uomo-Macchina e Multimedia 25
Esempio Mapping Gloria Menegaz Interazione Uomo-Macchina e Multimedia 26
Esempio Mapping: Front/Rear? Gloria Menegaz Interazione Uomo-Macchina e Multimedia 27
Modelli concettuali Modello concettuale: l implicita comprensione che una persona ha circa la tecnologia e il funzionamento del sistema in modo che l utente abbia una qualche idea che se esegue l azione A, l azione B ne è la conseguenza. Buon esempio: WYSIWYG: what you see is what you get Esempi privi di modello concettuale: termostati sistemi di retrieval on line Gloria Menegaz Interazione Uomo-Macchina e Multimedia 28
Vincoli o funzioni forzanti Vincoli: funzioni che prevengono l utente dal fare azioni inadeguate o che possono portare ad errori. Buon esempio: Menu Mac/Window che vengono ombreggiati per far capire che non possono essere fatte certe selezioni. Cattivo esempio: Unix - ogni comando è possibile Gloria Menegaz Interazione Uomo-Macchina e Multimedia 29
Gloria Menegaz Interazione Uomo-Macchina e Multimedia 30
Retroazione Feedback: funzione che fa in modo che una certa qualsivoglia forma di risposta (visuale, uditiva, etc.) sia data immediatamente dopo l azione dell utente e che indica che l azione è stata ricevuta. Buon esempio: icone sullo schermo che appaiono in negativo quando selezionate Marco è on-line Cattivo esempio: Latex e altri formattatori di testo. Gloria Menegaz Interazione Uomo-Macchina e Multimedia 31
Addestramento automatico Addestramento automatico: funzioni che evitano l uso di potenzialmente pericolosi comportamenti ripetitivi dell utente. Cattivo esempio: l azione di conferma di un comando che richiede sempre un return. Buon esempio: l azione di conferma di un comando che richiede una qualche conoscenza del contesto, eg., il primo carattere del file da cancellare. Gloria Menegaz Interazione Uomo-Macchina e Multimedia 32
Siamo dei buoni progettisti? Siamo ordinati? Mettiamo le stesse cose negli stessi posti? Come mettiamo a posto i ns. vestiti? Quando urtiamo la testa, ginocchia, etc. nello stesso posto, spostiamo le cose in modo da creare una funzione forzante per evitare i futuri urti? Mettiamo delle etichette per distinguere oggetti simili (es. chiavi)? Diamo conferma di ricezione delle email? (impossibile!) Gloria Menegaz Interazione Uomo-Macchina e Multimedia 33