PRINCIPI DI PROGETTAZIONE DI UNA INTERFACCIA UTENTE

[Estratto dal capitolo 1 del libro di Marcus & C. La parte su stili di interazione dal capitolo 12 del libro di Newman & Lamming]

Interfaccia utente: strumento attraverso il quale un'applicazione comunica con l'utente e viceversa.

L'interfaccia sta tra l'utente e un programma applicativo. Deve dare accesso a tutte le funzionalita' dell'applicazione in modo facile e intuitivo.

Principi di progettazione possono essere classificati in:

fattori umani
presentazione
interazione

Fattori umani

Identificare e capire le attivita' che l'utente deve poter effettuare. Tenere conto delle capacita', esperienza, limitazioni dell'utente tipico (relativamente a percezione, memoria, attenzione e apprendimento).

Due principi:

dare il controllo all'utente
ridurre la quantita' di informazione che l'utente deve ricordare

Il controllo all'utente

L'utente deve essere colui che controlla l'interfaccia, decidendo quali funzionalita' dell'applicazione vuole attivare e quando, quali informazioni vuole che gli siano presentate, quando, come, con che aspetto estetico...

Il progetto dell'interfaccia deve essere sufficientemente flessibile per venire incontro ad utenti con diverse necessita' ed abilita'.

Esempi:

fornire modi diversi per accedere alle funzioni dell'applicazione (es. per utente piu' o meno esperto): selezionando voce di menu', cliccando icona, premendo tasto-funzione...
permettere di personalizzare attributi dell'interfaccia: colore, funzioni, struttura, contenuto (interfaccia configurabile)

Ridurre la quantita' di informazione da ricordare

Una persona ha piu' facilita' a riconoscere che a ricordare. Esempio: riconoscere un comando in una lista di opzioni piuttosto che ricordarne il nome a memoria.

Quindi occorre:

presentare all'utente i comandi, le opzioni o i dati disponibili
guidare l'utente mostrando sullo schemo le informazioni appropriate per completare un determinato processo
organizzare le informazioni in modo significativo cosi' da aiutare l'utente a focalizzarsi sulle informazioni pertinenti a cio' che sta facendo

Presentazione

Si riferisce agli aspetti visivi dell'interfaccia: disposizione, colore, forma e dimensione degli elementi (oggetti) che la compongono.

Conciliare estetica, leggibilita' e facilita' d'uso. Tre principi:

creare un aspetto attraente
usare rappresentazioni significative e riconoscibili
mantenere la consistenza dell'interfaccia

Aspetto attraente

Attenzione a colore, forma, spaziatura, dislocazione ed organizzazione degli oggetti sullo schermo.

Ogni oggetto sullo schermo deve avere un aspetto facilmente riconoscibile e comprensibile. Armonizzare l'aspetto dei vari oggetti in modo da creare un insieme piacevole a vedersi.

Un uso opportuno del contrasto (fra lo sfondo e i singoli oggetti) aiuta l'utente a distiguere gli oggetti dallo sfondo. Evitare colori troppo violenti che possono infastidire o distrarre.

Rappresentazioni significative e riconoscibili

La rappresentazione di un oggetto deve essere chiara, significativa (evocativa della funzione a cui l'oggetto e' preposto) e visivamente distinguibile dagli altri oggetti.

A volte puo' essere opportuno raggruppare (gerarchicamente) gli elementi di un'interfaccia in classi (es. per affinita' di funzione). Le classi vanno scelte in modo significativo, e deve essere visivamente riconoscibile quali oggetti appartengono a ciascuna classe.

L'animazione puo' essere usata per attrarre l'attenzione dell'utente su una particolare area dello schermo. Senza abusare.

Consistenza dell'interfaccia

All'interno della singola interfaccia

Consistenza visiva: similarita' nell'apparenza e nella disposizione degli oggetti componenti.
Consistenza nel comportamento: es. tutti i bottoni si azionano con lo stesso tasto del mouse.
Consistenza funzionale: la stessa azione deve avere lo stesso risultato indipendentemente dallo stato dell'applicazione.

Tra interfacce diverse

Importante la consistenza fra le interfacce di applicazioni diverse. Facilita l'apprendimento dell'utente.

Esempio: in applicazioni diverse la stessa funzione e' invocata tramite un elemento di interfaccia che ha apparenza e posizione analoga (es. menu' "file" con open - close - save).

Vantaggi della consistenza

Una progettazione consistente produce un'applicazione prevedibile nell'aspetto e nel comportamento per quanto concerne:

visualizzazione delle informazioni (informazioni dello stesso tipo presentate nello stesso modo)
metodi di manipolazione delle informazioni (azioni analoghe si invocano in modo simile)
metodi di navigazione (alla ricerca dell'opzione voluta)

Vantaggi:

riusabilita' delle componenti di interfaccia
facilita' di apprendimento per l'utente

Interazione

Interazione: modalita' attraverso la quale l'utente controlla l'esecuzione di un'applicazione.

L'interazione avviene tramite

tastiera
pointing device (puntatore): es. mouse
altro (penna ottica, schermi sensibili al tatto, comandi vocali...)

L'interazione consiste in azioni dell'utente che provocano reazioni (feedback) da parte dell'interfaccia. Tipiche azioni dell'utente:

posizionarsi su un oggetto, selezionarlo, spostarlo...
navigare attraverso l'interfaccia (es. menu' a cascata)
attivare una funzionalita'
trasferire informazioni (es. immettere un parametro)

Feedback (risposta, riscontro) = segnale che l'interfaccia ha "recepito" l'azione dell'utente.

Tre principi di progettazione:

scegliere lo stile di interazione opportuno
fornire un feedback immediato alle azioni
far si' che l'interfaccia sia tollerante verso gli errori dell'utente

Scelta dello stile di interazione

Stile di interazione usato in un'interfaccia si riferisce a:

come organizzare e presentare all'utente le funzionalita' dell'applicazione
come gestire l'input dell'utente
come presentare le informazioni all'utente

Tre stili fondamentali:

linguistico
a menu'
manipolazione diretta

Stile di interazione linguistico

Tipico delle interfacce NON grafiche. Interazione da command-line.

Input dell'utente consiste in comandi alfanumerici. Output consiste in messaggi alfanumerici.

CONTRO:
Per poter interagire con l'interfaccia, l'utente deve conoscere il linguaggio (sintassi/semantica).
Difficile (lungo) da imparare.

PRO:
L'utente esperto riesce ad interagire in maniera molto veloce.

Stile di interazione a menu'

Puo' essere realizzato sia da un'interfaccia grafica che da una non grafica.

In ogni momento l'utente puo' immettere una scelta in una lista che gli viene proposta. In base alla scelta dell'utente l'interfaccia compie un'azione oppure propone un'altra lista di scelte (es: serie di menu' gerarchici, cioe' in cascata).

PRO:
L'interfaccia guida (assiste) l'utente passo-passo.
Permette all'utente inesperto di navigare tra le funzionalita' dell'applicazione.
Impedisce di invocare operazioni non valide.

CONTRO:
Per l'utente esperto, lentezza nell'accesso alle funzionalita' (per ovviare a questo esistono shortcut = scorciatoie cioe' tasti funzione che portano direttamente ad una funzionalita' senza navigare nella gerarchia di menu').
Non supporta interazioni complesse.

Stile di interazione per manipolazione diretta

Tipico delle interfacce grafiche.

Mostra un insieme di oggetti sullo schermo e l'utente puo' interagire con ciascuno di essi. L'utente agisce direttamente su un oggetto (icona o simbolo) attraverso il mouse. Gli oggetti sono reattivi: il loro aspetto, posizione... cambia a seconda delle azioni dell'utente.

Esempio: ambiente per gestione dei file in cui per cancellare un file trascino l'icona nel cestino...

PRO:
Ricalca il modo naturale dell'utente di interagire con gli oggetti nel mondo reale.
Fornisce all'utente risultati visibili ed immediati (es. mediante animazione).

CONTRO:
L'interfaccia non fornisce assistenza passo-passo.

Coesistenza di piu' stili

I tre stili si possono combinare tra loro nella stessa interfaccia per ottenere maggior facilita' d'uso. Attenzione pero' a mantenere il tutto consistente.

Feedback immediato

"Feedback" = controsegnale, risposta, riscontro.

Importante che l'applicazione mostri di reagire alle azioni dell'utente. Che l'utente riceva un risultato immediatamente. Il feedkack aumenta l'apprendimento da parte dell'utente. L'assenza di feedback disorienta l'utente.

Manifestazioni di feedback da parte di interfacce utente:

evidenziare una componente dell'interfaccia (es. elemento di menu') per indicare selezione avvenuta
produrre un suono per verificare attivita' della tastiera
mostrare messaggio che l'operazione invocata e' stata eseguita
cambiare forma al puntatore (es. clessidra) per indicare che l'operazione invocata e' in corso di esecuzione

Tolleranza agli errori

L'interfaccia riceve azioni da parte dell'utente che non sono conformi alle specifiche del sistema (opzioni non sensate, non valide, invocate per errore...) senza conseguenze negative per l'utente (es. perdita di dati).

Tecniche comunemente usate:

reversibilita' delle azioni attraverso funzione "undo" (= disfa, annulla)
richiesta di conferma per azioni distruttive o che comportano perdita di informazione (es. uscire senza aver salvato): cancel / OK
disabilitare oggetti corrispondenti ad azioni illegali nello stato attuale (es. rendere grigia e non selezionabile l'etichetta di una voce di menu')

Tolleranza a errori facilita l'apprendimento (posso esplorare le funzionalita' dell'interfaccia senza timore di effetti negativi).