6-come costruire interfacce usabili

Come Costruire Interfacce Usabili?

Ci sono modi diversi, per tradurre User, Task e Object analysis

in una interfaccia.Come garantire

che questa traduzione produca una interfaccia ‘usabile’?

Quali criteri applicare,per giudicare se una interfaccia è usabile?

(prossime lezioni)

Studiare•Chi sono gli utenti•I loro compiti

Descrizione di utenti e compiti

Obbiettivo

Metodi

Prodotti

Brainstorm designs

Valu

tazi

one

dei

task

s

Psicologia degli oggetti quotidiani

Coinvolgimento dell’utenteRepresentazione & metafora

Interazione partecipatoria

Task scenario walk-through

Prototipi testabili

Il progetto di interfacce come processo

Slide idea by Saul Greenberg

Progettazione di sistemi orientati ai compiti

Design partecipatorio

Progetto orientato all’utente

Metodi di prototipiz-zazione

low fidelity

Prototipi (usa e getta)

Raffinamento del progetto

Progetto delle videate

Linee- guida interfacce

Metodi di prototipiz-

zazione high fidelity

Testare l’usabilità

Heuristic evaluation

Completamento progetto

Versioni Alpha/beta del sistema

Test sul campo

Laurea in ITPS

Progettazione dell'Interazione con L'Utente

Valeria Carofiglioa.a. 2011-12

Principi, Linee Guida, Regole di Progetto e Standard

Cosa sono Indicazioni per il progettista

che si sono dimostrate utili in progetti simili:

• Positive: “Per ottenre questo risultato, puoi adottare questa soluzione”

• Negative: “In questa situazione evita di fare questo”

• + o – Generali: si applicano a tutti I casi o a casi specifici• + o – Coercitive: da suggerimenti a scelte vincolanti

Categorie di indicazioniPrincipi: Principi generali per la progettazione di sistemi interattivi

utente usabili, basate su evidenza scientifica o sul generale consenso. Derivano dalla conoscenza degli aspetti psicologici, computazionali e sociali e sono indipendenti dalla tecnologia. Sono espressi spesso in forma molto generale

Linee guida: Insieme di raccomandazioni per il progetto dell’interfaccia utente per una particolare classe di sistemi, espresse in modo generale ma meno astratte degli standard, con esempi e motivazioni. Non sono vincolanti, sta al progettista decidere sulla opportunità di applicarle caso per caso

Standard: Insieme di regole da applicare nel progetto di una classe di sistemi. Sono vincolanti: I progettisti devono applicarli. Sono di norma emesse da un Ente di standardizzazione. La conformità allo standard deve essere valutabile in modo preciso

Regole di progetto: Insieme di regole da applicare nel progetto di un particolare sistema. Sono vincolanti

Gli Standard del HCI• ISO 13407: Human-centred design processes for interactive systems,

Scopo: aiutare coloro che hanno la responsabilità di gestire i processi di progettazione di hardware e software a pianificare in modo adeguato le attività di progettazione human-centred.

• ISO 9241:Ergonomics of Human System Interaction, Scopo:standard principale relativo alla human-computer interaction. È

molto ampio, ed è composto da numerosi documenti separati, in evoluzione da una ventina d’anni.

E' in corso un processo di revisione dell’intero standard. Nella nuova numerazione, i documenti sono organizzati in serie tematiche:

Serie 100: Software ergonomics;Serie 200: Human system interaction processes;Serie 300: Displays and display related hardware;Serie 400: Physical input devices - ergonomics principles;Serie 500: Workplace ergonomics;Serie 600: Environment ergonomics;Serie 700: Application domains - Control rooms;Serie 900: Tactile and haptic interactions.

Gli Standard del HCIOltre agli International Standard, l’ISO può produrre altri tipi di

documenti, con un livello di consenso inferiore:

ISO Technical Specification (ISO/TS), ISO Public Available Specification (ISO/PAS) e ISO Technical Report (ISO/TR).

In particolare, il TC/159 SC 4 ha prodotto questi documenti aggiuntivi:

ISO/TR 16982: Ergonomics of human-systems interaction – Usability methods supporting human-centred design;

ISO/PAS 18152: Ergonomics of human-systems interaction – Specification for the process assessment of human-system issues;

ISO/TR 18529: Human-centred lifecycle process descriptions.

I principi Possono essere formulati in vario modo

Abbiamo già analizzato: I principi dettati da Norman (definiti nel modulo:

progetto di oggetti di uso quotidiano)

Nel seguito analizzeremo: I principi del dialogo con i sistemi interattivi

(ISO 9241-110) Le otto regole d'oro di Shneiderman Le dieci regole euristiche di Nielsen

I principi del dialogo secondo l'ISO 9241-110

Adeguatezza al compito Auto-descrizione Conformità alle aspettative dell’utente Adeguatezza all’apprendimento Controllabilità Tolleranza verso gli errori Adeguatezza all’individualizzazione

Un modello di qualità


Adeguatezza al compito Un sistema interattivo è adeguato al compito se

supporta l’utente nel completamento del compito, cioè quando la funzionalità del sistema e il dialogo

sono basati sulle caratteristiche del compito,

piuttosto che sulla tecnologia scelta per eseguirlo.

Nota per I requisiti di progetto Partendo da ogni caso d’uso,

l’utente dovrà svolgere i compiti e le azioni necessarie nella sequenza più naturale per lui, e non per il software che gestisce l’interazione (must dello User Centered Design)


Linee Guida coerenti con il principio generale:

Adeguatezza al compito Passi adeguati al compito Informazione adeguata al compito Dialogo essenziale Dispositivi di I/O adeguati al compito Formati di inputi adeguati al compito Default tipici Compatibilità con i documenti

Esempio: dialogo non essenziale

Funzione Font di Word 6.0

L’esistenza degli stessi controlli su ogni tab lascia presupporre che si tratti di controlli diversi per ogni tab...

conseguenza

L’utente clicca su OK dopo aver apportato i cambiamenti per ogni tab prima di passare ad effettuare ulteriori cambiamenti sulla tab successiva

Piu’ corretto

Funzione Font di Word 97I controlli comuni a tutte le tab sono esterni alle tab stesse e non sono ripetuti per ogni singola tab

OK

Esempio:Mancanza di default tipici

Unisyn's Automate ProOrdine di creazione dei controlli:

• Campo “Regarding”

• OK

• Controllo “Cancel”

• ….

…e Se l’utente cercasse di navigare attraverso i controlli usando il Tab?


Auto-descrizione Un dialogo è auto-descrittivo se

agli utenti risulta evidente, in ogni momento, in che dialogo si trovano,

a che punto si trovano all’interno del dialogo, quali azioni possono compiere e

come queste possono essere eseguite.

Nota Ricordate il modello di Norman?

(auto-descrizione per ridurre i golfi della valutazione ed esecuzione)


Linee Guida coerenti con il principio generale: Auto-descrizione

Guida all’utente (inf. Operative, Inf. Su stato del sistema, feedback) Interazione evidente (legato all'effordance) Manualistica minima Stato visibile (attende input? Elabora? Ha finito?) Descrizione dell’input atteso (legato al vincolo d'uso) Formati descritti

Esempio di descrizione di input atteso & formato:Inserire una data

•Maggiori sono i vincoli, meno si puo’ sbagliare– Importante per la gestione dell’input dell’utente

Controls constructed in Visual Basic

I principi del dialogo secondo l'ISO 9241-110Conformità alle aspettative

Un dialogo è conforme alle aspettative se corrisponde alle necessità dell’utente,

prevedibili in base al contesto e a

convenzioni comunemente accettate

Nota carattere generale


Linee Guida coerenti con il principio generale: Conformità alle aspettative

Linguaggio familiare (molto importante: testo, icone,...) Aderenza alle convenzioni (Dubai: lettura da destra a sinistra) Organizzazione abituale Dialogo consistente Feedback conforme alle aspettative Tempi di risposta conformi alle aspettative Messaggi adeguati al contesto Messaggi in posizione adeguata Input in posizione attesa Stile coerente dei messaggi

Esempio:Aderenza alle consuetudini

Esempio:Mancanza di organizzazione abituale

Unisyn's Automate ProOrdine di creazione dei controlli:

• Campo “Regarding”

• OK

• Controllo “Cancel”

• ….

…e Se l’utente cercasse di navigare attraverso i controlli usando il Tab?

Esempio:organizzazione abituale

Il layout di pagine web (studio condotto nel 2001)

Esempio: mancanza di consistenza

Visual Basic 5.0

Esempio: messaggi in posizione appropriata

Esempio: stili non coerenti


Adeguatezza all'apprendimento

Un dialogo è adeguato all’apprendimento se

supporta e guida l’utente nell’apprendimento del sistema.


Linee Guida coerenti con il principio generale: Adeguatezza alle aspettative

Bassa soglia di apprendimento Aiuto alla familiarizzazione Aiuto online Feedback intermedio Modello concettuale evidente (quale logica?) Spermentazione sicura (undo nei sistemi) Riapprendimento facilitato


Controllabilità

Un dialogo è controllabile se l’utente è in grado

di iniziare e tenere sotto controllo la direzione e i tempi

dell’interazione fino al raggiungimento dell’obiettivo.

Nota nessuna sequenza prestabilita nel dialogo utente-sistema


Linee Guida coerenti con il principio generale: controllabilità

Tempi di interazione controllati dall'utente (no time-out se non necessari) Proseguimento del dialogo controllato dall'utente Punto di ripartenza controllato dall'utente Reversibilità delle operazioni (undo) Modalità di visualizzazione dei dati controllata dall'utente Dispositivo di interazione scelto dall'utente Personalizzazione dei valori di default Disponibilità dei dati originali


Tolleranza verso l'erroreUn dialogo tollera gli errori se,

nonostante evidenti errori negli input, i risultati desiderati possono essere ottenuti

senza o con minime azioni correttive. La tolleranza per gli errori si ottiene attraverso

a) prevenzione; b) segnalazione e

c)- azioni correttive automatiche



Assistenza all'utente Verifica e convalida dei dati Prevenzione di azioni non valide Richieste di conferma Spiegazione dell'errore Spiegazione aggiuntiva Assistenza per il recupero Minimo sforzo di correzione Correzione differibile Correzione automatica modificabile


Adeguatezza all'individuazione

Un dialogo è adeguato all’individualizzazione se l’utente può

modificare l’interazione e la presentazione dell’informazione per adattarle alle proprie necessità e

capacità individuali.

Nota User centered design (personalizzazione)



Scelta di rappresentazioni alternative Scelta del formato dei dati di input e output Vocabolario personalizzabile Scelta del livello delle spiegazioni Personalizzazione dei tempi di risposta Scelta del metodo di interazione Personalizzazione del dialogo Ripristinabilità dei valori precedenti

Esercizio

· Analizza criticamente le linee guida del modulo.Ritieni ci siano sovrapposizioni o ridondanze?

Quali?Ne proporresti una semplificazione?

Quale?

Esercizio

· Scegli un software che usate di frequente:Analizza differenti

possibilità di personalizzazione,In funzione delle tue specifiche necessità e abitudini

Le otto ‘Regole d’Oro’ di Shneiderman

Strive for consistency: use consistent sequences of actions in similar situations, identical terminology in prompts, menus etc, consistent commands throughout.Enable frequent users to use shortcuts: abbreviations, special keys hidden commands and macro facilities reduce the number of interactions and the pace of interaction.Offer informative feedback: for every operator action, there should be some system feedback.Design dialogs to yield closure: the informative feedback at the completion of a group of actions gives the operator the satisfaction of accomplishment and the indication that the way is clear to prepare for the next group of actions.

Le otto ‘Regole d’Oro’ di Shneiderman

Offer simple error handling: the user should not have to retype the entire command, but only need repair the faulty part.Permit easy reversal of actions: this relieves anxiety, since the operator knows that errors can be undone; the units of reversibility may be a single action, a data entry or a complete group of actions.Support internal locus of control: users should be made the initiators of actions rather than the responders.Reduce short-term memory load: displays should be kept simple, frequent window motion should be reduced, online access to command syntax forms etc should be provided.

Le dieci euristiche di NielsenVisibilità dello stato del sistema

– Il sistema dovrebbe sempre informare gli utenti su ciò che sta accadendo, mediante feedback appropriati in un tempo ragionevole

.Corrispondenza fra il mondo reale e il sistema– Il sistema dovrebbe parlare il linguaggio dell’utente,

con parole, frasi e concetti familiari all’utente, piuttosto che termini orientati al sistema. Seguire le convenzioni del mondo reale, facendo apparire le informazioni secondo un ordine logico e naturale.

Le dieci euristiche di Nielsen Libertà e controllo da parte degli utenti

– Gli utenti spesso selezionano delle funzioni del sistema per errore e hanno bisogno di una “uscita di emergenza” segnalata con chiarezza per uscire da uno stato non desiderato senza dover passare attraverso un lungo dialogo. Fornire all’utente le funzioni di undo e redo

Consistenza e standard– Gli utenti non dovrebbero aver bisogno di chiedersi

se parole, situazioni o azioni differenti hanno lo stesso significato. Seguire le convenzioni della piattaforma di calcolo utilizzata.

Le dieci euristiche di Nielsen Prevenzione degli errori

– Ancora meglio di buoni messaggi di errore è un’attenta progettazione che eviti innanzitutto l’insorgere del problema. Eliminare le situazioni che possono provocare errori da parte dell’utente, e chiedergli conferma prima di eseguire le azioni richieste.

Riconoscere piuttosto che ricordare– Minimizzare il ricorso alla memoria dell’utente, rendendo

visibili gli oggetti, le azioni e le opzioni. L’utente non dovrebbe aver bisogno di ricordare delle informazioni, nel passare da una fase del dialogo a un’altra. Le istruzioni per l’uso del sistema dovrebbero essere visibili o facilmente recuperabili quando servono.

Le dieci euristiche di Nielsen Flessibilità ed efficienza d’uso

– Acceleratori – invisibili all’utente novizio – possono spesso rendere veloce l’interazione dell’utente esperto, in modo che il sistema possa soddisfare sia l’utente esperto sia quello inesperto. Permettere all’utente di personalizzare le azioni frequenti.

Design minimalista ed estetico– I dialoghi non dovrebbero contenere informazioni

irrilevanti o necessarie solo di rado. Ogni informazione aggiuntiva in un dialogo compete con le unità di informazione rilevanti e diminuisce la loro visibilità relativa.

Le dieci euristiche di Nielsen Aiutare gli utenti a riconoscere gli errori, diagnosticarli e correggerli

– I messaggi di errore dovrebbero essere espressi in linguaggio semplice (senza codici), indicare il problema con precisione e suggerire una soluzione in modo costruttivo.

Guida e documentazione– Anche se è preferibile che il sistema sia utilizzabile

senza documentazione, può essere necessario fornire aiuto e documentazione. Ogni tale informazione dovrebbe essere facilmente raggiungibile, focalizzata sul compito dell’utente, e dovrebbe elencare i passi concreti da fare, senza essere troppo ampia

Proprietàdelle Interfacce ‘Usabili’

(kit di sopravvivenza)

NaturalezzaCompletezzaConsistenzaNon complessitàNon ridondanzaAssistenzaFlessibilità

Naturalezza

“Un dialogo è naturale quando non richiede all’Utente di alterare in modo significativo il suo modo comune di eseguire un task”.

Il sistema deve comportare il numero minimo possibile di cambiamenti, nel lavoro svolto dall’Utente: deve permettergli di concentrarsi sul lavoro da svolgere, non sull’uso del sistema.

Ad esempio: i form da compilare devono rispettare il più possibile la struttura dei moduli che l’Utente compilava nella fase precedente all’automazione

Nota: una definizione ’superata’ di naturalezza…!!

Esempio di ‘Naturalezza’ Input dei dati relativi alle prescrizioni:

Modulo ‘standard’ del SSN:

codice nome assistito etàindirizzo ASL prov sesso esenzioneprescrizione-richiesta-proposta: suggerita (S) integrativa (I) ricovero (R)………………………

data timbro e firma del medico

………………

Completezza

“Un dialogo è completo quando permette di effettuare tutte le funzioni previste nella fase di progettazione”.L’interfaccia deve permettere di accedere a tutti task previsti, per ogni categoria di Utente, in ogni fase dell’interazione in cui l’accesso al task è necessario;ma, inoltre, non deve contenere ‘percorsi chiusi’ (dead ends),cioè situazioni in cui è impossibile completare il task iniziatooppure accedere a nuove funzioni.

Le verifiche di completezza sono facilitate dalla rappresentazione della dinamica del dialogo sottoforma di ‘diagrammi di transizione fra gli stati’.

Esercizio

Fai qualche esempio di ‘non completezza’,in una delle applicazioni che conosci.

Consistenza

“Un dialogo è consistente quando l’esperienza acquisita dall’Utente con l’uso di una parte del sistema non viene contraddetta da cambiamenti ingiustificati introdotti in altre parti.”

Consistenzavisiva: la collocazione degli oggetti grafici nello spazio deve essere guidata da regole che valgono

per tutte le fasi dell’applicazione funzionale: task simili devono essere svolti in modo simile

Consistenza interna: tra le diverse funzioni svolte da un sistemaesterna: tra le stesse funzioni, svolte da diversi

sistemi all’interno di un ambiente (es, Windows)

Esempi di inconsistenza

Inconsistenza interna

Inconsistenza esterna

Consistenza interna in PaintNei task di ‘gestione del file-immagine’, le pop-up windowche si aprono in corrispondenza delle funzioni di ‘apri’, ‘salva con nome’, ecchanno tutte lo stesso aspetto:

Nota che questa toolbar permette di

definire la ‘cartella di lavoro’ (nuovo

oggetto) e come mostrare i file in essa

contenuti

Cartella superioreDesktop Nuova cartella

Elenco

Dettagli

Esempio di ‘Non Consistenza’ Esempi di ‘non consistenza visiva’:

rappresentare la funzione ‘trova la cartella di un paziente’ con icone diverse, in diverse fasi dell’interazione;

collocare il bottone di ‘Exit’ in posizioni diverse, in diverse fasi;

ordinare gli elementi di un menu in modo diverso, in diverse fasi;

assegnare nomi in inglese o in italiano, agli elementi di un menu, in diverse fasi.

Esempi ‘Non Consistenza’

Esempi di ‘non consistenza funzionale’:

eseguire la funzione ‘uscire dal task salvando i dati introdotti’, mediante un solo comando (esempio, bottone ‘Quit’) o mediante due comandi successivi, (esempio, bottone ‘Save’ + bottone ‘Quit’), in fasi diverse;

imporre un ordine prefissato / libero nell’inserimento degli stessi dati, in fasi diverse.

Esercizio

Consistenza esterna:il task ‘Salva con nome’ in Paint è coerente (funzionalmente e visivamente) con quello di Word?

Fai qualche esempio di inconsistenza visivae nella esecuzione task (interna o esterna), in uno dei software che conosci

“Un dialogo è non complesso quando consente di effettuare le funzioni previste con un ‘ragionevole’ grado di efficienza”.

Complessità visiva: è funzione del numero di oggetti presenti contemporaneamente in un display

Complessità funzionale: dipende dal numero di operazioni elementari che devono essere

eseguite per completare un task

Non Complessità

Esempio ‘Complessità’

Confronta i due modi seguenti di compiere il task di ‘Ricerca della cartella di un paziente’:

click sull’icona “Ricerca di una Cartella” , nella finestra principale

apertura di una finestra ‘dati di identificazione’, che contiene cognome, nome, data di nascita, numero della cartella;

inserimento di ‘cognome, nome e data di nascita (oppure di ‘numero cartella’); conferma;

visualizzazione della prima pagina della cartella.

… oppure…

Esempio ‘Complessità’ (segue)… oppureclick sul bottone “Gestione dell’Archivio”, nella finestra principale;apertura di una nuova finestra, con icone ‘Ricerca di una

Cartella’, ‘Creazione di nuova cartella’, ecc;click sull’icona “Ricerca di una Cartella”;apertura di una finestra con la domanda: “Conosci il numero

della cartella”?Risposta si/noapertura di una finestra con i soli dati d’identificazione scelti.

Nota il trade-off fra complessità visiva e funzionale!

Esercizio

Confronta la complessità funzionale di uno stesso taskcon due tool diversi in uno stesso ambiente.

Ad esempio:apri un nuovo documentoregistralo con un nomescrivi una riga di testoinserisci una immaginesalvastampa esci

con WinWord e con WinPad

Non Ridondanza

“Un dialogo è non ridondante quando richiede all’Utente di fornire soltanto il minimo indispensabile d’informazione necessaria per attivare ciascuna delle funzioni desiderate;presenta all’Utente soltanto il minimo di informazioni necessarie”

Esercizio

Fai qualche esempio di errori di ridondanza, in un software che conosci.

3.2.6. Assistenza

“Un dialogo deve assistere l’Utente fornendogli diversi tipi di aiuto durante l’esecuzione” :

elenco delle istruzioni disponibilimessaggi di errore chiaririchiesta di conferma di quello che il sistema sta per fare (soprattutto se l’operazione è, per qualche ragione, ‘pericolosa’)avviso su quello che il sistema sta facendo (soprattutto per operazioni che richiedono tempi di esecuzione lunghi)

Esempi di messaggi di errore poco chiaririprendiamo qualche esempio della prima Unità

Esercizio

Fai qualche esempio di assistenza insufficiente, in un software che conosci.

Flessibilità

“Una interfaccia è flessibile quando è in grado di essere efficace, efficiente e confortevole anche per Utenti con caratteristiche diverse”.

Quando gli Utenti previsti hanno caratteristiche (e quindi, esigenze) diverse,

l’interfaccia deve essere capace di riconoscere il tipo di Utente con cui sta interagendo ed adattare il suo comportamento di conseguenza.

Vedremo in seguito come è possibile realizzare forme diverse di adattamento nell’interazione.

‘Flessibilità’ nell’Esempio Medico In questo Sistema informativo, alcune funzioni vengono

eseguite frequentemente (es: la ricerca e l’aggiornamento delle singole cartelle), altre con minore frequenza (es: le statistiche periodiche sull’attività svolta). Alcune richiedono competenze mediche (ad esempio, la codifica delle diagnosi o l’inserimento di dati relativi alla visita), altre soltanto competenze di uso di sistemi computerizzati (che una Segretaria può acquisire facilmente).

Le competenze menzionate possono variare nel tempo e a seconda della tipologia di medici e l’organizzazione dell’ambulatorio.

Realizzare un unico sistema che possa essere utilizzato in entrambe le situazioni organizzative descritte nella Unità 1 richiede la costruzione di un sistema flessibile.

Esercizio 3.8Descrivi in che modo, nel progettare l’interazione con il Sistema per il tuo Caso di Studio, potresti tenere conto delle esigenze di:

NaturalezzaCompletezzaConsistenzaNon complessitàNon ridondanzaAssistenza

Fai esempi precisi per ciascuna delle caratteristiche elencate.Indica, inoltre, se e come il sistema che hai progettato contiene elementi di flessibilità.

Proprietàdelle Interfacce ‘Usabili’

• Ancora esempi

Esempio: mancanza di consistenza interna funzionale

Lista delle tracce sul CD

Lista delle tracce scelte

IBM's AudioStationFunzione Playlist, che permette all’utente di selezionare le canzoni e specificare l’ordine con cui si vuole ascoltarle

Controlli

Un doppio-click ha effetti

diversi nelle due liste

Osserva: La regola sotto cui il controllo opera e’ diversa

Esempio: mancanza di consistenza esterna funzionale

Funzione “taglia” di Microsoft Excel

Cosa accade selezionando “taglia” dal menu’ modifica in ambiente Windows?

Osserva: La regola sotto cui il controllo opera e’ diversa

Taglia = “rimuovi l’oggetto e memorizzalo per riusarlo in seguito ”

Regola

“lascia l’oggetto in quella posizione finche’ non lo incollo da qualche altra parte”

Regola Taglia = “seleziona cio’ che vorresti spostare ”

Esempio: mancanza di consistenza esterna visiva

Funzione “Zoom” di Paint

I controlli disabilitati devono “apparire” disabilitati

Per aggiungere testo ad una immagine in Paint l’utente deve prima cliccare sullo strumento “testo” per definire un’area in cui scrivere e poi procedere con l’inserimento del testo.

La funzione testo, pero’, non e’ disponibile quando una immagine e’ zoommata

L’utente inavvertitamente DISEGNA

Regola in ambiente windows:“Se il controllo “appare” abilitato lo strumento rappresentato dal controllo e’ utilizzabile nella fase corrente dell’interazione”

Esempio:Controllo non appropriato

Politica Microsoft per richiedere l’installazione della versione di Internet Explorer adeguata all’esecuzione di applicazioni Visual Studio

Se non si sceglie di installare la versione 4.01 di IE

Il controllo “next” e’ disabilitato

Che scelta è questa ??

Controllo CheckBox

Installation Wizard per Visual Studio

6-come costruire interfacce usabili

Documents