PROGETTAZIONE DI INTERFACCE UTENTE

[Estratto dal capitolo 5 del libro di Shneiderman]

Fase di progettazione

E' sensato stendere un progetto completo dell'interfaccia prima di iniziare ad implementarla, anche se e' certo che durante l'implementazione si dovra' cambiare qualcosa.

Elementi chiave

Stato interno

Quali informazioni descrivono lo stato corrente:

• variabili dell'applicazione (es. in un word processor, se sto scrivendo in grassetto o in corsivo, con che font e dimensione di carattere...)
• variabili aggiuntive dell'interfaccia (es. se al momento e' visualizzato il righello oppure no, con che fattore ingrandimento sto mostrando il testo...)

Che valore hanno queste variabili all'inizio.

Operazioni

Quali operazioni l'utente deve poter compiere attraverso l'interfaccia:

• operazioni dell'applicazione sottostante (es. cambiare font...), bisogna individuare la funzione applicativa che va chiamata (o la sequenza di chiamate a funzioni applicative)
• operazioni sull'interfaccia stessa (es. mostrare o nascondere il righello...)

Di che parametri hanno bisogno queste operazioni.

Pensare in che modo l'utente invochera' queste operazioni tramite l'interfaccia (tramite bottone, menu'...) e in che modo immettera' i parametri.

L'esecuzione di queste operazioni come modifica lo stato dell'applicazione?

Errori

Le operazioni hanno sempre senso o ci sono stati in cui certe operazioni non hanno senso?

Ci sono vincoli sui parametri?

Pensare quali controlli sono necessari su operazioni invocate e parametri immessi.

Considerare se opportuno disabilitare i dispositivi corrispondenti a certe operazioni quando nello stato attuale non sono sensate.

Considerare quando e' necessario mostrare messaggi di errore o avvertimento e in che modo.

Quali azioni di ricovero bisogna prevedere? (es. in quali casi offrire possibilita' di tornare indietro con "undo")

Layout dell'interfaccia

Stabilito quali elementi servono nell'interfaccia, stenderne il layout (schizzo dell'interfaccia con indicazione dei dispositivi presenti e della loro collocazione).

Uno schizzo per ogni finestra (finestra principale, finestre di dialogo...). Gli elementi di interfaccia non permanentemente visibili (es. menu') sono descritti a parte.

Indicare anche, per ogni elemento attivo di interfaccia, l'operazione o la serie di operazioni compiute nella sua callback.

Attivita' (task)

Individuare un insieme di attivita' applicative di interesse. Ogni attivita' si scompone in una serie di operazioni.

La complessita' della serie di operazioni necessaria a compiere un'attivita' e' un indicatore per valutare l'interfaccia relativamente ai fattori umani (facilita' di apprendimento, comodita' d'uso, incidenza di errori).
Bisogna che le attivita' scelte per valutare l'interfaccia siano significative!

Strumenti per descrivere il progetto

Sono stati elaborati vari formalismi, per lo piu' grafici, per descrivere un'interfaccia progettata.

Screen layout

Schizzi di come appaiono le finestre dell'interfaccia, quali dispositivi contengono e come dislocati.
Utili a fornire descrizione statica dell'apparenza dell'interfaccia.

Alberi di menu'

Descrivono la struttura di menu' a cascata (menu' e sotto-menu').

Analoghi gli alberi per finestre di dialogo a cascata. In pratica descrivono la relazione di dipendenza funzionale tra finestre.

Diagrammi di transizione

• nodi rappresentano stati del sistema
• archi orientati rappresentano le possibili transizioni di stato

Un'altra variante etichetta gli archi con la frequenza (in percentuale) con cui l'utente compie quell'azione.

Diagrammi di stato (statecharts)

Versione modulare dei diagrammi di transizione.

Un grafo ad alto livello considera uno stato semplificato, dove non si tiene conto di certe variabili.

Un nodo del grafo ad alto livello si puo' espandere in un sottografo che fornisce descrizione piu' dettagliata dello stato, tenendo conto anche delle variabili che non erano state considerate al livello piu' alto.

Notazione ad azioni dell'utente (UAN = user action notation)

Adatto a descrivere il comportamento di interfacce che usano manipolazione diretta.

Descrive le attivita' (task) in termini di sequenza di azioni dell'utente e relativo feedback fornito dall'applicazione.

Per ogni task si compila una tabella a tre colonne (azione dell'utente, feedback dell'interfaccia, cambiamento di stato del sistema). Nella tabella si elencano le azioni (con relative reazioni e cambiamenti di stato) che compongono il task, in ordine di tempo.

Per esprimere le azioni e i feedback si usa un linguaggio, che qui riportiamo semplificato (usiamo parole chiave in inglese, la versione originale usa simboli, piu' veloci da scrivere ma piu' difficili da ricordare).

Nel linguaggio posso denotare oggetti sui quali si compie l'azione o il feedback. Esempi:

• icone: si scrive il nome dell'icona
• posizioni: si scrive la coppia di coordinate (x,y)
• contorno dell'icona: si usa la notazione outline(...)

E posso denotare azioni e feedback attuati su questi oggetti.
Esempi di azioni dell'utente:

• muovere puntatore su un'icona o su una posizione (senza premere tasti): moveto[...]
• pressione / rilascio di tasto del mouse: press / release

• evidenziare o far tornare normale un'icona: highlight[...] o nohighlight[...]
• far lampeggiare un'icona: blink[...]
• cancellare un'icona: erase[...]
• traslare un'icona: drag[...]

Esempio: task per cancellare un file.

La tabella viene:

User actions	Interface feedback	Internal state
moteto[file], press	highlight[file], forall(highlight[file]): nohighlight[file]	selected_file = file
moveto[x,y]	drag[outline(file)]
moveto[trash]	drag[outline(file)], highlight[trash]
release	erase[file], blink[trash]	selected_file = null

In generale puo' bastare scrivere in linguaggio naturale non ambiguo e preciso. Cioe' mettere nella tabella la descrizione a parole del task che e' stata fatta prima.

Progettiamo un'interfaccia per un'applicazione "calcolatrice" con le operazioni binarie di addizione, sottrazione, moltiplicazione, divisione.

Task e loro scomposizione

Per eseguire la prima operazione, l'utente immette il primo operando, poi l'operazione ed infine il secondo operando.

Per eseguire le operazioni successive l'utente immette solo l'operazione e il secondo operando, mentre il primo operando e' dato dal risultato dell'operazione precedente.

In qualsiasi momento l'utente puo' anche cancellare tutto e tornare allo stato iniziale, come se non avesse ancora eseguito nessuna operazione.

All'utente viene mostrato l'ultimo operando immesso o, se gia' eseguita, il risultato dell'operazione.

Stato interno

Variabili dell'applicazione:

• a1 = primo operando, che e' anche il risultato dell'ultima operazione (se per ultima cosa e' stata fatta un'operazione), puo' non esistere
• a2 = secondo operando, puo' non esistere
• op = operazione impostata (una tra le quattro), puo' non esistere

Variabili dell'interfaccia:

• vv = il numero visualizzato, che e' il secondo operando se esiste, altrimenti il primo se esiste, altrimenti niente

Stato iniziale: Non esitono ne' i due operandi ne' l'operazione. Non visualizza nulla.

Stati possibili

Dai vincoli imposti sono possibili solo 4 stati:

• s0 con a1 = _, a2 = _, op = _, vv = _
• s1 con a1 = N1, a2 = _, op = _, vv = N1
• s2 con a1 = N1, a2 = _, op = S, vv = N1
• s3 con a1 = N1, a2 = N2, op = S, vv = N2

Operazioni e transizioni di stato

• Immettere operazione.
  Deve esistere almeno il primo operando. Non deve esistere gia' un'operazione se non esiste il secondo operando. Cioe' lo stato deve essere s1 o s3.
  Se e' gia' impostata un'operazione ed esiste il secondo operando, esegue l'operazione impostata, il risultato diventa il nuovo primo operando, questa diventa la nuova operazione, il secondo operando resta indefinito. Cioe' da s3 va in s2.
  Se non e' impostata un'operazione e non esiste il secondo operando, imposta l'operazione. Cioe' da s1 va in s2.

• Immettere un numero.
  Non deve esistere ancora nessun operando, oppure deve esserci un'operazione impostata. Cioe' lo stato deve essere s0 o s2.
  Se non esiste il primo operando, lo imposta. Cioe' da s0 va in s1.
  Altrimenti imposta il secondo operando. Cioe' da s2 va in s3.

• Azzerare.
  Torna allo stato iniziale. Possibile sempre, non ha molto senso se siamo gia' in stato iniziale. Cioe' da s1,s2,s3 va in s0.

• Finire operazione.
  Devono esistere l'operazione ed entrambi gli operandi. Cioe' lo stato deve essere s3.
  Esegue l'operazione, il risultato diventa il nuovo primo operando, l'operazione e il secondo operando restano indefiniti. Cioe' va in stato s1.

Diagramma di transizione

Per non appesantire la notazione, le frecce dell'azione di azzeramento sono state omesse.

Quali dispositivi e layout - primo modo

• un campo di testo usato sia per mostrare il valore corrente che inserire il nuovo operando
• una fila di 6 bottoni per le 4 operazioni (+-*/), la fine operazione (=) e l'azzeramento (C)

Callback del campo di testo:

• quando l'utente inizia a scrivere sul campo, il contenuto viene cancellato per far posto a cio' che l'utente digita
• quando l'utente ha finito, l'applicazione legge il numero immesso

Callback dei bottoni:

• +, -, *, / impostano l'operazione
• = finisce operazione
• C azzera

In ogni momento sono disabilitati i dispositivi corrispondenti ad azioni non valide nello stato corrente: il campo di testo in stato s1 ed s3, i bottoni +, -, *, / in stato s0 ed s2, il bottone = in stato s0, s1, d2, il bottone C in stato s0.

Ogni volta che utente finisce di scrivere nel campo di testo, l'interfaccia controlla che sia stato scritto un numero. In caso contrario emette un "BIP" (o mostra un messaggio...) e rimane nello stato corrente.

Quali dispositivi e layout - secondo modo

• Calcolatrice classica con i bottoni per le cifre e a parte campo (non editabile) che mostra il valore corrente.
• Come prima, i 6 bottoni per le operazioni, la fine e l'azzeramento.

Nuovo sotto-task per immissione di un numero:
inizia quando l'utente preme la prima cifra, continua finche' l'utente preme cifre, termina quando l'utente preme un bottone diverso da una cifra.

Dettagliamo gli stati s1 ed s3 in sotto-diagrammi che descrivono la costruzione del numero cifra per cifra.

Ed analogamente (non e' il caso di disegnarlo) per s3. La figura mostra solo la parte cambiata rispetto alla figura precedente.

Callback dei bottoni-cifre:

• Esiste una nuova variabile di stato che dice se stiamo costruendo il primo o il secondo operando.
• Alla pressione di una cifra D, il primo o secondo operando (a seconda del caso) viene modificato secondo la formula N = 10*N + D.