Riprogettazione Dellinterfaccia

8

Click here to load reader

Transcript of Riprogettazione Dellinterfaccia

Page 1: Riprogettazione Dellinterfaccia

Università degli Studi di Bari

Facoltà di Scienze MM.FF.NN Corso di Laurea in Informatica e tecnologie per la produzione del software

Corso di Interazione uomo macchina e progettazione dell’interazione con l’utente Prof.ssa Valeria Carofiglio a.a. 2011-2012

RIPROGETTAZIONE DELL’INTERFACCIA

GADALETA FABIO

SCHINO FRANCESCO

TANGA CARMINE

Page 2: Riprogettazione Dellinterfaccia

IINNDDIICCEE

Sezione 1: Sintesi delle analisi e delle valutazioni

1. Sintesi del primo prototipo

2. Sintesi del Walkthrough

3. Sintesi delle valutazioni euristiche ed empiriche

Sezione 2: Riprogettazione

1. Descrizione delle riprogettazioni

Descrizioni delle conferme

Descrizione delle modifiche

2. Qualità del progetto

Appendice 1

1. Allegati

Page 3: Riprogettazione Dellinterfaccia

SSEEZZIIOONNEE 11:: SSIINNTTEESSII DDEELLLLEE AANNAALLIISSII EE DDEELLLLEE

VVAALLUUTTAAZZIIOONNII

1- SINTESI DEL PRIMO PROTOTIPO

Definire un prototipo in fase iniziale di un progetto è molto più utile di definire un prodotto

completo alla fine della programmazione. Alla luce di tale osservazione, il nostro intento è

stato quello di ideare un prototipo low-fidelity che si basasse sulla semplicità di

realizzazione, per motivi di tempo e di entità delle risorse impiegabili.

I prototipi creati sono stati di due tipi:

1) Pictive, un prodotto simil-iPad realizzato con un modello cartaceo al quale erano

collegate le schede dei vari “sottogiochi”, suddivisi per genere in base a dcategorie

poste in una “cesta di giochi”

2) Un altro prototipo su carta con schizzi e bozze dell’interfaccia che, pur apparendo

scarna, ci ha aiutato, successivamente, ad avere idee più chiare sulla realizzazione

progettuale.

Il secondo prototipo è stato oggetto di ulteriori miglioramenti.

Esso è un prototipo statico ma è stato reso interattivo, grazie alla realizzazione della

maggior parte delle schermate e videate. Non possiamo dire di essere stati subito

pienamente soddisfatti, ma siamo riusciti ad ottenere ottimi risultati dalle azioni di

miglioramento, soprattutto dopo aver effettuato dei test di usabilità dell’interazione con i

nostri utenti.

Basandoci sul prototipo fin qui definito, provvederemo a trarne i vantaggi prima mancanti

e ad implementare miglioramenti non preventivabili in precedenza.

2- SINTESI DEL WALKTHROUGH

Il walkthrough associato al primo prototipo ci aveva già permesso di effettuare prime

considerazioni interessanti, ma nella fase delle valutazioni euristiche successive non sono

state tenuto in considerazione.

Le valutazioni empiriche sono state, invece, accorpate con le analisi del walkthrough della

prima progettazione; molti dei risultati osservati in relazione alla prima rappresentazione

Page 4: Riprogettazione Dellinterfaccia

del prototipo cartaceo, sono stati riscontrati anche per il successivo prototipo migliorato, in

quanto molti cambiamenti analizzati precedentemente non erano stati considerati, proprio

perché la riprogettazione sarebbe stata necessaria anche dopo la valutazione preliminare,

euristica ed empirica.

Non si è voluto quindi apportare modifiche sostanziali al prototipo cartaceo, tranne che

provare ad inserire alcune funzionalità prima assenti (come ad esempio i tasti volume o il

tasto di ritorno) per poter ottenere un riscontro diverso dal risultato dell’analisi del

walkthrough.

3- SINTESI DELLE VALUTAZIONI EURISTICHE ED

EMPIRICHE

Le valutazioni euristiche ed empiriche hanno prodotto, come ci aspettavamo, molti risultati

sia positivi che negativi. Positivi, perché gli utenti ci hanno segnalato numerosi elementi

sui quali poter lavorare in termini di miglioramento, negativi perché molte volte abbiamo

creduto che un utente di così tenera età avrebbe affrontato con maggiore semplicità gli

esercizi proposti, che si sono rivelati non adeguati al suo livello di conoscenza.

In ogni caso la totalità dei dati raccolti ci ha permesso di definire una prima

riprogettazione, sicuramente migliore dal punto di vista qualitativo.

Page 5: Riprogettazione Dellinterfaccia

SSEEZZIIOONNEE 22:: RRIIPPRROOGGEETTTTAAZZIIOONNEE

1- DESCRIZIONE DELLA RIPROGETTAZIONE

L’analisi delle valutazioni è stata davvero difficile, non tanto per i dati raccolti, ma per la

loro interpretazione. Da un errore di interpretazione può conseguire non un miglioramento

ma una scarsa qualità del prodotto finale.

La riprogettazione sarà svolta in base ai dati raccolti, ideando una rappresentazione più

consona e adatta, con una interfaccia più fluida e più semplice, essenziale all’adeguatezza

del compito e alla facilità e rapidità di apprendimento.

DESCRIZIONE DELLE CONFERME

Il menù esagonale, la prima delle schermate visibili, oltre al supporto fisico, è la nostra

prima conferma. Migliorata a livello grafico e semplificata, non ha suscitato negli utenit

nessun commento negativo, ma anzi solo stupore che ha stimolato la curiosità del

bambino e quindi lo ha invogliato al suo utilizzo.

Ulteriori conferme sono state registrate in relazione l livello di presentazione del menù: lo

sfondo e i task sono stati ben orientati e le etichette non sono state necessarie, grazie alle

immagini già di per sé semplici e chiare.

DESCRIZIONE DELLE MODIFICHE

In relazione al sistema, la maggior parte delle impostazioni sono state ritoccate, ma non

del tutto stravolte.

Con riferimento al supporto fisico, abbiamo voluto rendere il prototipo meno spigoloso e

quindi più tondeggiante.

Esso, a livello di impatto grafico, si presenta con una linea più “elegante” oltre che in un

colore neutro: non bianco perché troppo chiaro, nè nero perché troppo scuro: una via di

mezzo, tendente quasi al metallico, secondo il gradimento degli utenti.

La presenza di funzionalità poco chiare all’impatto frontale della vista dell’utente avrebbe

potuto sicuramente confonderlo: ne è conseguita la necessità di eliminare i pulsanti del

volume e del ritorno e di inglobarli all’interno della schermata touch; le funzioni sono

modificabili attraverso semplici pressioni sullo schermo e sono state posizionate agli angoli

Page 6: Riprogettazione Dellinterfaccia

dell’esagono, in modo tale da risultare visibili e facilmente comprensibili attraverso le

immagini simboliche che le rappresentano.

Oltre a queste modifiche, abbiamo voluto aggiungere la funzione di luminosità dello

schermo, per aumentare o diminuire la luminosità e il contrasto delle videate.

Oltre ai tasti fisici delle funzioni volume e ritorno indietro, è stata eliminata la presenza dei

led indicanti il livello di carica del dispositivo: lo status di crica è stato spostato all’interno

della videata.

Il dispositivo di uscita (altroparlanti) sono stati spostati nella parte posteriore del supporto;

il microfono è stato ridotto nelle dimensioni e spostato nella parte superiore accanto alla

webcam.

Tutto ciò per ottenere un hardware più elegante e meno difficile da interpretare.

Altro aspetto fondamentale è stato rendere più comprensibile e meno confusionaria anche

la parte tattile del touch screen.

Partendo dalla poca chiarezza delle immagini che abbiamo potuto osservare, le lettere

minuscole, per un bambino, non sono risultate molto comprensibili e abbiamo deciso di

effettuare una sostituzione con le lettere maiuscole.

Oltre all’intervento sulle lettere, alcune forme poco note al bambino hanno confuso le sue

idee. Ne è conseguita la nostra volontà di rimuovere alcune forme difficili da interpretare

(come il pentagono o l’esagono), aggiungendo forme già conosciute dagli utenti e

inserendole di varie dimensioni.

Infine, sempre nel menù principale, la fetta dell’esagono raffigurante i colori a strisce è

risultata poco divertente, scambiata quasi per un misto di bandiere a strisce. L’immagine

sarà sostituita con delle chiazze di colore simili a schizzi su un muro bianco; questa

versione del menù ci è sembrata molto più adatto a ciò che un bambino farebbe se si

trovase davanti ad un muro con la possibilità di colorarlo.

In relazione ai sottomenù, ognuno di essi conteneva al suo interno 3 sottotask, uno per

ogni esercizio, e un menù di sfondo troppo nitido e luminoso nel quale era facile perdersi e

confondersi. Per questo motivo abbiamo deciso di ridurre la trasparenza dello sfondo, in

modo da farlo risultare in secondo piano rispetto ai task; questi ultimi, inoltre, non saranno

più rappresentati da un’immagine statica ma da un’animazione dell’esercizio con un

esempio del suo svolgimento, in modo da far capire intuitivamente all’utente cosa

potrebbe succedere toccando una specifica parte dello schermo.

Con riferimento agli esercizi provati (l’associazione dei colori e il ricopiare la lettera), si è

deciso di eliminare qualcosa o rendere più semplice l’interazione, come abbiamo notato e

ci hanno fatto notare.

Iniziamo dal ricopiare la lettera.

Page 7: Riprogettazione Dellinterfaccia

L’esercizio per dipingere la lettera aveva una similitudine con la realtà, ovvero un

secchiello dove intingere il dito ma, visto e osservato che quasi nessuno degli utenti

eseguiva la procedura così come l’avevamo pensata, abbiamo voluto rendere la loro

interazione quanto più possibile simile alla realtà, senza il secchiello nel quale intingere

digitalmente il dito, lasciando invariato il resto dell’interfaccia.

L’associazione di colori è stata resa molto meno complicata. L’utente non avrà più il

compito di scegliere il nome del colore e il colore da associare, ma solo i nomi da

selezionare. Così alla sua pressione, la casella esagonale si riempirà del colore scelto e

genererà un ritorno audio con la pronuncia del colore scelto; non tutti i bambini, infatti,

sanno leggere le parole intere e il nostro obbiettivo è insegnare loro come si scrivono i

colori senza rendere noiosa la loro interazione.

Inoltre, sono stati sostituiti alcuni colori poco noti, come il magenta e il ciano, con colori

più usati e conosciutida un bambino, quali il fucsia e il celeste.

In base alla prima valutazione compita e agli errori riscontrati, la prima riprogettazione è

stata fatta cercando di rimediare agli errori fatti durante la prima analisi.

Al termine di questa fase, probabilmente, ci saranno ancora altri tipi di errori,dovuti ad

esempio alle preferenze non tutte uguali dei bambini, ma abbiamo cercato di soddisfare la

maggior parte di loro attraverso le migliorie apportate.

2- QUALITA’ DEL PROGETTO

Non è possibile stabilire la qualità del progetto a priori e soprattutto non è possibile

valutarla oggettivamente senza analizzarne l’impatto reale sull’utenza, proprio perché il

target scelto per il prodotto è un’utenza specifica.

Per quanto ci è possibile, daremo un giudizio di qualità quanto più oggettivo.

L’interazione come detto sopra, non è stata modificata, tranne per l’eliminazione di alcuni

tasti fisici.

In seguito alla miglioria apportata, una freccia permetterà sicuramente di trasmettere un

significato più chiaro per il bambino; inoltre sono stati eliminati dalla parte fisica del

prototipo tutti i dettagli che rendono caotica l’interfaccia per il bambino: le luci della carica

della batteria, i due altoparlanti (all’interno dei quali il piccola sarebbe tantato ad infilarci

piccoli oggetti), tasti senza una dicitura o un’ etichetta. Sicuramente, ora, l’impatto visivo è

più facilitato.

Gli esercizi sono stati resi più accessibili a tutti i bambini della fascia d’età considerata, dai

3 ai 6 anni, tenendo presente il diverso livello di apprendimento e di conoscenza.

Page 8: Riprogettazione Dellinterfaccia

In conclusione, ci riteniamo soddisfatti di questa prima riprogettazione, basata sul risultato

di un’analisi e di una valutazione imperniata sugli utenti ai quali era indirizzato il prodotto;

non ci saremmo aspettati di poter riscontrare molti più difetti di quanti ne avessimo

preventivati.

AAPPPPEENNDDIICCEE 11

Nell’allegato sarà presente un file che mostrerà le differenze fra il “prima” e il “dopo” dei

miglioramenti effettuati, con alcune videate che mostreranno come si stia proseguendo nel

lavoro di progettazione, successivo alla valutazione.