Valutazione Visiva di
Interfacce
Indice

Tipi di interfacce

Tecniche di valutazione delle funzionalità di una interfaccia


Tecniche per la valutazione visiva
• due possibili tecniche di rappresentazione del layout
• qualche cenno sull’utilizzo del colore nell’ interfaccia
Casi di studio applicando le tecniche di valutazione visiva
Tipi di Interfacce



Diversi gruppi di utenti hanno diverse necessità che devono
essere prese in considerazione durante il design di
un’interfaccia.
Alcune caratteristiche da valutare sono conoscenza, abilità,
esperienza, istruzione.
Le tecniche utilizzate per realizzare un’ interfaccia vengono
riassunte in quattro stili di interazione.
•
•
•
•
Batch
Command interfaces
Menu interfaces
Direct manipulative interface
Una possibile classificazione dei tipi di interfacce viene stimata utilizzando
due parametri di valutazione: functional feedback e interactive directness.
Le interfacce del tipo console (command language) sono caratterizzate da
un’ alta chiarezza di interazione ma hanno un basso di valore di feedback
visuale. Solo le interfacce grafiche con lo stile del desktop(GUI)
supportano un buon feedback ed un’alta interazione con l’utente.
Funzionalità di una interfaccia


L’ approvazione da parte di un utente di un’ interfaccia è
una misura critica per il successo dell’ interfaccia stessa.
Infatti un sistema può garantire alte performance ma se
non possiede un’ interfaccia adeguata all’ utenza cui è
rivolto, non avrà grande successo.
Durante il processo di sviluppo di un’ interfaccia vengono
utilizzate quattro principali tecniche per valutarne l’
efficienza:
•
•
•
•
Cognitive Walkthrough
Heuristic Evaluation
Guidelines
Usability Testing
Tecniche di valutazione

Cognitive Walthrough: gli sviluppatori percorrono
all’interno dell’interfaccia i passi che l’utente dovrà
realizzare, in cerca di errori di realizzazione
Le azioni e il feedback dell’interfaccia vengono confrontati
con gli obiettivi e le conoscenze dell’utente e le discrepanze
tra le aspettative dell’utente e i passi richiesti
dall’interfaccia vengono notati.

Usability Testing: Viene osservato un campione di utenti
ai quali viene chiesto di utilizzare una specifica interfaccia,
raccogliendo dati che in seguito serviranno a trarre
conclusioni. Questa tecnica copre un ampio range di
attributi inclusi l’abilità dell’utente a capire, la facilità di
apprendimento e la chiarezza dell’input.
Tecniche di valutazione

Heuristic Evaluation: Viene svolta osservando
l’interfaccia e tentando di dare un giudizio su ciò che è
positivo e negativo. Generalmente questa valutazione viene
effettuata in accordo con certe regole simili a quelle
presenti nei tipici documenti di linee guida.
Le principali regole utilizzate per la valutazione euristica
sono le nove presentate da Nielsen e Molich

Guidelines: E’ un insieme di regole molto ampio che
spinge coloro che valutano l’interfaccia a prendere in
considerazione l’intera interfaccia piuttosto che alcune
proprietà.
Questo tipo di valutazione permette di trovare problemi
ricorrenti e generali.
Valutazione Visiva

Una tecnica visuale si basa su principi visuali che valutano il
layout dal punto di vista visivo.
Alcuni principi possono essere applicati in modo completo,
altri parzialmente.
Le tecniche visuali hanno una componente basata
sull’armonia e la tecnica opposta basata sul contrasto.
Esse possono essere divise in cinque categorie:
•
•
•
•
•
Physical techniques
Composition techniques
Association and dissociation techniques
Ordering technique
Photographic techniques
Tecniche Fisiche

Le tecniche fisiche valutano la struttura del layout di un’
interfaccia. Le tecniche sono le seguenti:
Balance: E’ la ricerca dell’equilibrio lungo l’asse verticale o orizzontale del layout.
Instability: Indica che gli IO non sono distribuiti in modo equo su ogni parte dell’asse.
Symmetry: Consiste nel duplicare l’immagine degli IO lungo l’asse orizzontale e/o
verticale dell’asse.
Asymmetry: Quando almeno un IO non possiede una replica sull’altro lato dell’asse.
Regularity: Stabilisce l’uniformità degli IO disposti in accordo con principi che non
variano da un layout a un altro.
Irregularity: Tali principi non sussistono e non esiste un ordine logico tra gli IO.
Alignment: Consiste nel minimizzare il numero di punti di allineamento verticale in
una riga e il numero di punti di allineamento orizzontale in una colonna.
Misalignment: Si presenta quando il numero di punti di allineamento è maggiore di
un altro.
Proportion: Ricerca un grado di interesse estetico tra le dimensioni degli IO.
Disproportion: E’ implicata quando non sono utilizzate delle proporzioni particolari o è
presente una grande differenza tra le due dimensioni.
Horizzontality: E’ raggiunta quando il layout presenta maggiore larghezza che
altezza.
Verticality: E’ raggiunto quando il layout presenta maggiore altezza che larghezza.
Per quanto riguarda il layout esistono due principali strategie di disposizione degli IO:
static two-column based strategy e dynamic right/bottom strategy.
In generale ogni strategia decompone la disposizione degli IO in tre dimensioni
parzialmente sovrapposte:
Localization: spiega dove disporre le informazioni sullo schermo o dove disporre gli IO
Dimensioning: spiega come disporre le informazioni sullo schermo o con quale
dimensione modificare gli IO. Si occupa per esempio del massimo
numero di carartteri per etichetta, del numero di elementi in una list
box, dell’armonia tra lunghezza ed altezza in una dialog box.
Arrangement: Spiega secondo quale ordine piazzare le informazioni sullo schermo o
come gli IO dovrebbero essere disposti per ordine logico, di frequenza
o con un formato predefinito. Questa tecnica dovrebbe essere il più
logica possibile, dovrebbe prendersi cura dell’aspetto estetico e di
ridurre i movimenti oculari e la densità dello schermo
A Two-column Based Static Strategy
Lo scopo di questa strategia è quello di dividere la sequenza di IO in
due colonne, che devono essere il più possibile simili in lunghezza e in
proporzione applicando i seguenti principi:
•
•
•
Centramento verticale per il titolo e le due colonne.
Quattro allineamenti, due uniformità e l’equilibrio orizzontale e verticale per
il contenuto delle colonne.
Equilibrio proporzionato o totale per bottoni, icone, ecc
A Right/Bottom Dynamic Strategy
Questa strategia dispone dinamicamente gli IO e può offrire più
alternative tra le quali scegliere, in modo iterativo.
Lo spazio delle alternative di disposizione degli IO diventa un albero
binario. Uno stato è un insieme di condizioni di disposizione che
descrivono il sistema ad uno specifico punto durante il processo. Ad
ogni stato vengono applicate particolari euristiche dinamiche che
dipendono dalla sequenza e dal tipo di IO.
Queste euristiche si basano su relazioni matematiche.
Mentre la prima startegia è statica e rigida, la seconda è più
dinamica e flessibile grazie all’abilità di disporre progressivamente
gli IO passo dopo passo.
In generale le strategie dinamiche sono preferibili a quelle statiche
perchè facilitano il lavoro del designer in diversi passi prima di
ottenere il risultato finale ed inoltre permette di minimizzare
ulteriormente gli spazi inutilizzati.
Tuttavia un layout ottimo per una metrica non è necessariamente
una buona soluzione per un altro tipo di metrica. Per esempio la
two columns base strategy ottiene un buon risultato in simmetria
bilanciamneto e allineamento, ma non ottiene sicuramente il
massimo nell’appropiatezza del layout.
A seconda del layout che il designer vuole ottenere verrà utilizzata
una delle due tecniche piuttosto che un mix di entrambe.
Tecniche di Composizione
Semplicity: E’ la chiarezza e la singolarità del layout libero da complicazioni o
sofisticazioni secondarie.
Complexity: Aumenta la complessità visuale con troppe unità e ostacola
l’organizzazione del layout.
Economy: E’ l’utilizzo frugale e giudizioso degli IO nel layout per presentare le
informazioni nel modo più semplice possibile.
Intricacy: Si manifesta quando infrequenti e non voluti IO ostacolano il layout, non
necessariamente in modo visuale.
Understatement: Suppone che l’utente sia in grado di dedurre un massimo di
informazione da un minimo di IO.
Exaggeration: Mostra nel layout il minimo di informazioni con il massimo degli IO.
Neutrality: Garantisce un’atmosfera neutrale ottenuta piazzando gli IO allo stesso
livello e con gli stessi attributi di presentazione.
Accent: Consiste nell’utilizzare dei metodi di evidenziazione su un particolare IO
contro l’uniformità del background.
Singularity: Focalizza l’attenzione su un particolare IO separato o solitario.
Juxtaposition: Esprime un’interazione tra gli IO piazzati da un lato all’altro del layout.
Negativity: Mostra gli IO con colori scuri su un background chiaro.
Positivity: Mostra gli IO con colori chiari su background scuro.
Trasparency: Identifica un layout nel quale gli IO, rimpiazzati da altri IO, continuano
ad essere visibili dietro o attraverso essi.
Opacity: Significa la completa esclusione, nascondendo gli IO che diventano
visivamente occultati.
Tecniche di Associazione e
Dissociazione
Unity: E’ la disposizione dei singoli IO in modo tale che appaiano come un IO unico.
Fragmentation: Gli IO sembrano isolati e mantengono le proprie caratteristiche.
Repartition: E’ la disposizione equa degli IO nei quattro quadranti dell’interfaccia.
Quadrant Preference: Si presenta quando gli IO vengono disposti preferibilmente in
uno o più specifici quadranti.
Grouping: Rappresenta coppie di IO legati da determinate caratteristiche o relazioni.
Splitting: Implica la totale assenza di strutture: gli IO sono disposti senza l’abilità di
percepire attrazione o repulsione tra di essi.
Sparing: Caratterizza il mantenimento del layout entro confini ragionevoli senza
causare il sovraffollamento di IO.
Density: Rappresenta un layout sovraffollato con IO ammassati.
Tecniche di Ordinamento
Consistency: Esprime compatibilità visuale con l’argomento, per sviluppare un layout
i cui IO sono dominati da uniformità costante.
Variation: Identifica cambiamenti, elaborazioni e variazioni tematiche.
Predictability: Rappresenta la disposizione degli IO disposti secondo ordini o scopi
altamente convenzionali e riconoscibili.
Spontaneity: L’utente non è in grado di dedurre i layout successivi dai precedenti.
Sequentiality: Rappresenta un tipo di layout disposto con un ordine logico previsto (
ordine alfabetico, logico, fisico, cronologico, per importanza … )
Randomness: Promuove l’assenza di un particolare piano di ordine; un layout nel
quale il flusso degli IO non può essere determinato a causa di
mancanza di organizzazione e pianificazione.
Continuity: Non interrompe la connessione visuale esistente tra gli IO. Queste
connessioni sono fondamentali per conservare un’espressione visiva
uniforme.
Episodicity: Sfrutta l’assenza di tali connessioni per rappresentare un rafforzamento
di alcune parti del layout.
Tecniche Fotografiche
Sharpness: Identifica IO chiaramente distinguibili, con precise linee e contorni.
Diffusion: Rappresenta una disposizione di IO più accurata, con minore distinguibilità
degli IO, ma creando un atmosfera più sensibile e calda.
Roundness: E’ la preferenza di IO arrotondati che dona un’atmosfera armoniosa.
Angularity: E’ la preferenza di IO con contorni spigolosi e irregolari.
Stability: E’ l’espressione di preferenza verso IO aventi una base chiara sulla quale
poggiare.
Stress: Si presenta quando gli IO non sono collocati su di una base solida, per
esempio un rombo o un triangolo disposto su uno dei suoi spigoli.
Livelling: Permette di riprodurre il bilanciamento con enfasi, quando viene facilmente
o difficilmente riconosciuta una condizione visiva astratta di tale bilanciamento.
Sharpening: Distrugge ogni bilanciamento automatico disponendo gli IO in posizioni
inaspettate e bilanciate.
Activeness: Riflette il movimento attraverso rappresentazioni esplicite o suggerimenti
impliciti. L’obiettivo è quello di creare un layout attivo ed energetico.
Passiveness: Elimina ogni tipo di IO che possa portare dinamicità. Si basa su una
rappresentazione statica che rappresenta un’atmosfera di quiete.
Subtlety: Ha lo scopo di fare una netta distinzione degli IO, evitando di utilizzare
quelli più scontati. E’ sinonimo di ingegnosità perché richiede IO delicati e
altamente raffinati.
Boldness: Ricerca gli IO più ovvi per un certo contesto. E’ spesso sinonimo di ottima
visibilità degli IO nel layout.
Representation: Il suo scopo è quello di utilizzare IO che rappresentano il mondo
reale in dettagli.
Abstraction: Utilizza IO che astraggono il mondo reale in molti modi.
Realism: E’la tecnica naturale della macchina fotografica, cerca di riprodurre
esattamente ciò che vediamo.
Distortion: Cerca il controllo dell’effetto attraverso la deformazione degli IO reali in
forme, immagini e colori ( zoom, lenti di ingrandimento ).
Flatness: Non utilizza alcuna tecnica per fornire prospettiva, cancellando la sensibilità
naturale della dimensione e dello spazio.
Depht: Cerca di rendere la prospettiva attraverso effetti di luce, ombra, colore,
sovrapposizione …
Colore
All’interno delle interfacce utente viene spesso trascurato il ruolo che il
colore gioca in diversi campi dell’interfaccia stessa: collega dati fra loro in
relazione, differenzia i campi obbligatori da quelli opzionali, evidenzia gli
errori grammaticali, separa diverse aree dello schermo come prompt,
comandi, campi di input/output ecc.
Tra i principali consigli sull’utilizzo del colore citiamo i seguenti:
•
•
•
•
•
•
Nel selezionare la combinazione dei colori accertarsi che siano compatibili,
evitare quindi saturazioni di colori complementari come blu-arancio rosso-verde
viola-giallo.
Il grigio è un colore versatile, utilizzabile nelle aree inattive e nel background per
evidenziare due o tre altri colori.
Evitare di utilizzare per il background colori troppo intensi in luminosità e
saturazione.
Il testo scuro su un background chiaro è più leggibile rispetto al contrario.
Evitare di utilizzare il blu puro per il testo, le linee fini e le piccole forme perché
viene messo a fuoco con più difficoltà.
Utilizzare i colori trovati in natura, come grigio, blu e gliallo. Questi colori sono
generalmente considerati armoniosi.
Conclusioni
Creare e/o valutare un’interfaccia è un compito
piuttosto complesso.
La sfida è quella di riuscire ad applicare
armonizzandoli tutti o gran parte dei criteri
esposti.
Per essere efficace uno strumento dovrebbe
fissare il livello “cognitivo” a cui operare,
minimizzando così eventuali punti di
contraddizione tra i vari metodi.
Un grazie a
Michele Casazza
e Davide Merli
per la raccolta del materiale