INTRODUZIONE ALLE INTERFACCE UTENTE

Che cosa e' un'interfaccia

Interazione Uomo Macchina ha come scopo la collaborazione fra utente e computer per svolgere un certo lavoro.

• il computer mette hardware (device), software (programmi applicativi), dati (file)
• l'utente mette il controllo (la decisione di che cosa fare)

Interfaccia utente o Graphical User Interface (GUI): strumento attraverso il quale il computer comunica con l'utente e viceversa, per realizzare (facilitare) questa collaborazione.

• "inter" = si pone "tra" l'utente e la macchina (intesa come insieme di hardware e di software)
• "faccia" = e' la "facciata" che la macchina mostra all'utente. Nasconde la complessita' del funzionamento interno, offre accesso alle funzionalita' in modo facile e intuitivo.

In generale interfaccia e' anche fra due strati software: da strato di basso livello verso strato di alto livello.

Per interfacce utente distinguere tra:

• Interfaccia dell'intero sistema (es. di Windows), definisce l'ambiente di lavoro su una certa macchina. Vedremo come funzionano.
• Intefaccia della singola applicazione (es. di Word). Impareremo anche a costruirle (con progetto di laboratorio).

Per interfaccia dell'intero sistema, vedremo: metafora della scrivania, window managament systems (finestre, eventi...).

Per interfaccia della singola applicazione, vedremo: dispositivi di interfaccia, contenitori, comportamenti.

Per entrambe, si applicano: look and feel, stili di interazione, consistenza.

Look and feel

Come l'interfaccia si presenta visivamente e come si lascia usare dall'utente.

• Look = guardare = aspetto grafico = come l'interfaccia e' disegnata: elementi che la compongono, loro disposizione, forma, dimensione, colore...
• Feel = sentire (essere vivo, rispondere alle sollecitazioni) = comportamento = come utente ed interfaccia interagiscono: con quali azioni sui dispositivi (mouse, tastiera...) l'utente puo' invocare operazioni ed ottenere risultati

Interazione

Interazione: modalita' attraverso la quale l'utente controlla il sistema o l'applicazione sottostante l'interfaccia.

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 da parte dell'interfaccia.

• Utente compie azione sull'interfaccia, questo fa si' che nell'interfaccia "accada qualcosa" (evento)
• L'interfaccia reagisce all'evento modificando il suo stato e/o quello del sistema/applicazione sottostante
• L'interfaccia comunica l'avvenuta reazione all'utente in modo visivo, sonoro... (feedback)
• Utente di conseguenza decide la prossima azione, ecc.

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)

Tipici feedback da parte di interfacce utente:

• evidenziare una componente dell'interfaccia per indicare selezione avvenuta
• produrre un suono
• 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

Stili di interazione

Lo stile di interazione riguarda il modo in cui l'interfaccia

• organizza e presenta all'utente le funzionalita' disponibili
• raccoglie le azioni (input) dall'utente
• presenta il feedback (output) all'utente

Tre stili fondamentali:

• linguistico
• a menu'
• per manipolazione diretta

Stile di interazione linguistico

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 ottenere cio' che vuole in maniera molto veloce. Richiede poche risorse macchina.

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'operazione 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 (es. immissione di un parametro numero reale).

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.

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.

Esempio

Ambiente per gestione dei file.

• stile linguistico: shell di comandi (Unix: cp, mv, rm..., Dos: copy, del...)
• stile a menu': per un file selezionato posso aprire menu' con funzioni (cancella, sposta, copia...)
• stile per manipolazione diretta: per cancellare un file trascino l'icona nel cestino, per spostarlo lo trascino nella nuova directory...

Coesistenza di piu' stili

I tre stili si possono combinare tra loro nella stessa interfaccia per ottenere maggior facilita' d'uso.

Consistenza

• Consistenza visiva: similarita' nell'apparenza e nella disposizione degli elementi grafici che la compongono.
• Consistenza nel comportamento: es. tutti i bottoni si azionano con lo stesso tasto del mouse.
• Consistenza funzionale: la stessa azione ha sempre lo stesso risultato.

Consistenza a due livelli:

• All'interno della singola interfaccia (di sistema o di applicazione).
• Fra le interfacce di applicazioni diverse nello stesso ambiente di lavoro (sistema).

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

• riusabilita' delle componenti di interfaccia (esistono librerie di componenti di interfaccia con aspetto e comportamento predefiniti)
• facilita' di apprendimento per l'utente