La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Valutazione Visiva di Interfacce. Indice Tipi di interfacce Tipi di interfacce Tecniche di valutazione delle funzionalità di una interfaccia Tecniche.

Presentazioni simili


Presentazione sul tema: "Valutazione Visiva di Interfacce. Indice Tipi di interfacce Tipi di interfacce Tecniche di valutazione delle funzionalità di una interfaccia Tecniche."— Transcript della presentazione:

1 Valutazione Visiva di Interfacce

2 Indice Tipi di interfacce Tipi di interfacce Tecniche di valutazione delle funzionalità di una interfaccia Tecniche di valutazione delle funzionalità di una interfaccia Tecniche per la valutazione visiva Tecniche per la valutazione visiva due possibili tecniche di rappresentazione del layoutdue possibili tecniche di rappresentazione del layout qualche cenno sull’utilizzo del colore nell’ interfacciaqualche cenno sull’utilizzo del colore nell’ interfaccia Casi di studio applicando le tecniche di valutazione visiva Casi di studio applicando le tecniche di valutazione visiva

3 Tipi di Interfacce Diversi gruppi di utenti hanno diverse necessità che devono essere prese in considerazione durante il design di un’interfaccia. 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. Alcune caratteristiche da valutare sono conoscenza, abilità, esperienza, istruzione. Le tecniche utilizzate per realizzare un’ interfaccia vengono riassunte in quattro stili di interazione. Le tecniche utilizzate per realizzare un’ interfaccia vengono riassunte in quattro stili di interazione. BatchBatch Command interfacesCommand interfaces Menu interfacesMenu interfaces Direct manipulative interfaceDirect manipulative interface

4 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.

5 Funzionalità di una interfaccia L’ approvazione da parte di un utente di un’ interfaccia è una misura critica per il successo dell’ interfaccia stessa. 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: Durante il processo di sviluppo di un’ interfaccia vengono utilizzate quattro principali tecniche per valutarne l’ efficienza: Cognitive WalkthroughCognitive Walkthrough Heuristic EvaluationHeuristic Evaluation GuidelinesGuidelines Usability TestingUsability Testing

6 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 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. 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.

7 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. 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à. 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.

8 Valutazione Visiva Una tecnica visuale si basa su principi visuali che valutano il layout dal punto di vista visivo. 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. Le tecniche visuali hanno una componente basata sull’armonia e la tecnica opposta basata sul contrasto. Esse possono essere divise in cinque categorie: Physical techniquesPhysical techniques Composition techniquesComposition techniques Association and dissociation techniquesAssociation and dissociation techniques Ordering techniqueOrdering technique Photographic techniquesPhotographic techniques

9 Tecniche Fisiche Le tecniche fisiche valutano la struttura del layout di un’ interfaccia. Le tecniche sono le seguenti: 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.

10 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 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. 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 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

11 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.Centramento verticale per il titolo e le due colonne. Quattro allineamenti, due uniformità e l’equilibrio orizzontale e verticale per il contenuto delle colonne.Quattro allineamenti, due uniformità e l’equilibrio orizzontale e verticale per il contenuto delle colonne. Equilibrio proporzionato o totale per bottoni, icone, eccEquilibrio proporzionato o totale per bottoni, icone, ecc

12 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.

13 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.

14 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.

15 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.

16 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.

17 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.

18 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.

19 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 …

20 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.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.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.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.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à.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.Utilizzare i colori trovati in natura, come grigio, blu e gliallo. Questi colori sono generalmente considerati armoniosi.

21 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.

22 Un grazie a Michele Casazza e Davide Merli per la raccolta del materiale


Scaricare ppt "Valutazione Visiva di Interfacce. Indice Tipi di interfacce Tipi di interfacce Tecniche di valutazione delle funzionalità di una interfaccia Tecniche."

Presentazioni simili


Annunci Google