Facoltà di Scienze MM. FF. NN. Università di Verona A.A ...Gloria Menegaz Interazione...

Gloria Menegaz Interazione Uomo-Macchina e Multimedia 1

Interazione Uomo-Macchinae Multimedia

Introduzione alle interfacce utente

Facoltà di Scienze MM. FF. NN. Università di Verona

A.A. 2008-09


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


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


Perché un informatico deve occuparsi di HCIUn 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


Cos’è un’interfaccia grafica?

• Vista dal progettista– la funzionalità dell’applicazione è separata dal UI– UI è spesso vista come un’aggiunta

• Vista dall’utente– non distingue tra UI e applicazione sottostante– se la UI è ben progettata e usabile, l’intera applicazione

appare usabile

computer utenteSistemi SW

Algoritmi

Dispositivi I/O

Documentazione

Training

Ambiente socialee lavorativoUser interface


• 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


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.


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


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


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


– 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


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


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.


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


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)


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


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.


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.


Cosa non va in questa interfaccia per videoconferenza ?


Perché questa è migliore ?

Riprogetto della stessa interfaccia


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.


• 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


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.


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


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.


Esempio Mapping


Esempio Mapping: Front/Rear ?


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


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


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

• Cattivo esempio:– Latex e altri formattatori di testo.

Marco èon-line


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.


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

Facoltà di Scienze MM. FF. NN. Università di Verona A.A ...Gloria Menegaz Interazione...

Documents

Transcript of Facoltà di Scienze MM. FF. NN. Università di Verona A.A ...Gloria Menegaz Interazione...