Candidato Docente di riferimento

Matteo Vacca Carta Salvatore

Introduzione

Obbiettivi

Sequenza attività

Usabilità e concetti

GWT (Google Web Toolkit)

Descrizione lavoro

Conclusioni

Prima del 1980 l’interazione tra utente e sistema avveniva esclusivamente tramite le CLI (Command Line Interface)

difficoltà di utilizzo

sistema di interazione rivolto ad utenti esperti

Con la nascita delle GUI (Graphical User Interface) e la sua successiva evoluzione l’interazione si sposta sempre più verso l’utente

Nasce il concetto di usabilità

Lo scopo di questa tesi è realizzare un’interfaccia per un’applicazione web.

Tale lavoro si concentra principalmente sullo studio di usabilità, cui seguirà la realizzazione tecnica dell’interfaccia, in modo da presentare all’utenza un prodotto semplice e piacevole da utilizzare.

Questa caratteristica assume una certa importanza in quanto l’applicazione è inserita in una community sportiva, di conseguenza l’utenza cui è rivolta non è specializzata ma è composta da persone che hanno conoscenze e competenze informatiche totalmente differenti.

Studio concetto di usabilità e relativi principi

Studio framework GWT e libreria SmartGWT

Fasi di sviluppo dell'interfaccia Studio del concept grafico Paper prototyping Primo test di usabilità Sviluppo del codice tramite librerie SmartGWT

secondo test di usabilità

IntroduzioneObbiettivi

Sequenza attività

Usabilità e concetti

GWT (Google Web Toolkit)

Descrizione lavoro

Conclusioni

La norma ISO 9241-11:1998 definisce l’usabilità come :

«Il grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza, soddisfazione in uno specifico contesto d’uso»

Accuratezza e completezza con cui si raggiunge un obbiettivo (efficacia)

Risorse spese per arrivare al risultato (efficienza)

Comfort e attitudine positiva con cui gli utenti raggiungono diversi obbiettivi (soddisfazione)

IntroduzioneObbiettivi

Sequenza attività

Usabilità e concetti

GWT (Google Web Toolkit)

Descrizione lavoro

Conclusioni

GWT (Google Web Toolkit) è un framework che permette di scrivere applicazioni RIA (Rich Internet Application) sfruttando la semplicità del linguaggio Java

Alto grado di manutentibilità

Cross-browser

Il compilatore presente in GWT si occupa di tradurre il codice Java in codice HTML e JavaScript compatibile con tutti i browser

IntroduzioneObbiettivi

Sequenza attività

Usabilità e concetti

GWT (Google Web Toolkit)

Descrizione lavoro

Conclusioni

Il lavoro svolto si articola in 4 punti

studio del concept grafico

Paper prototyping e primo test di usabilità

Realizzazione del mockup

Sviluppo del codice e secondo test di usabilità

In questa fase si è studiata, la tipologia di utente che userà l’applicazione e la posizione che devono assumere gli elementi all’interno dell’interfaccia per fornire all’utente ciò di cui ha bisogno in modo funzionale e logico

2 elementi di maggiore importanza

Lista delle gare

Pannello dei dettagli di gare

Lista delle gare

La lista delle gare è l’elemento sulla quale si deve concentrare maggiormente l’attenzione dell’utente

La sua posizione quindi sta nei primi 800px della pagina, nella parte detta «above the fold»

Da una ricerca effettuata da Jakob Nielsen risulta infatti che l’80% del tempo impiegato nella ricerca di informazioni è speso nei primi 800px

Sotto gli 800px la percentuale scende al 20%

Dettagli di gara

Non potendo inserire anche questa sezione nei primi 800px si è utilizzata una tecnica chiamata «progressive disclosure»

i dettagli sono nascosti durante l’utilizzo dell’applicazione

Vengono mostrati solo quando l’utente clicca su una determinata gara

La prima bozza dell’interfaccia è stata realizzata come prototipo cartaceo.

Questa tecnica chiamata «paper prototyping» è usata nella prima fase di realizzazione

mostra graficamente l’idea del progettista

è usata per effettuare i primi test utili a valutare l’usabilità del layout

è esente da bug e malfunzionamenti in quanto l’interazione è simulata

Il mockup è un prototipo identico al prodotto finale ma privo di interazione

Diversamente dal paper prototyping è molto più dettagliato dal punto di vista grafico

Il mockup è stato realizzato con GIMP 2

Tutte le icone utilizzate hanno licenza GPL/LGPL

Il codice dell’interfaccia è stato scritto interamente in Java utilizzando le librerie SmartGWT, basate sul framework GWT

Durante lo sviluppo si sono incontrati dei problemi nella gestione dei fogli di stile (CSS)

I problemi riscontrati sono stati principalmente 2

diversa interpretazione da parte dei browser delle regole CSS

sovrascrittura di alcune regole da me scritte, con regole definite «inline» dagli oggetti della libreria utilizzati

Sono stati effettuati 2 test

dopo la fase di «paper prototyping»

Dopo lo sviluppo del codice

La tecnica usata per effettuare i test è detta «Thinking Aloud»

si chiede all’utente di eseguire dei compiti e contemporaneamente esprimere ad alta voce ciò a cui sta pensando

Entrambi i test sono stati effettuati con 5 utenti

Studi di Nielsen dimostrano infatti che con 5 utenti è possibile rilevare fino all’85% dei problemi di usabilità

Con 5 utenti si scopre l’85% dei

problemi di usabilitàCon 15 utenti li

scopri tutti

Il primo test effettuato dopo la fase di paper prototyping voleva misurare l’usabilità relativa alla struttura dell’applicazione e al suo layout.

Ad ogni utente è stato assegnato un numero di compiti ritenuti significativi (creare gare, visualizzarne i dettagli ecc), che sono stati svolti commentandoli ad alta voce (Thinking aloud), in modo da individuare vari problemi che potevano scaturire da un design errato

L’usabilità è stata misurata tenendo conto di diversi fattori da valutare (struttura, grafica, navigazione, labelling) ai quali si è dato un valore (da 0 a 5) in relazione alla difficoltà dei compiti assegnati.

Test effettuato a prodotto finito

Computer-basedCompletamente interattivo

Essendo un test «computer-based» il test è stato effettuato per misurare l’usabilità, non più del layout ma, di tutte le componenti dell’interfaccia

Anche in questo test è stato utilizzato il metodo «Thinking aloud» per individuare meglio i problemi e soprattutto i punti nei quali gli utenti mostravano segni di confusione

IntroduzioneObbiettivi

Sequenza attività

Usabilità e concetti

GWT (Google Web Toolkit)

Descrizione lavoro

Conclusioni

L'obbiettivo era realizzare un'interfaccia utente per un’applicazione sportiva, che rispettasse diversi principi di usabilità.

Si è studiato il concetto di usabilità e i principi che sono stati applicati nelle diverse fasi di realizzazione, dal concept grafico allo sviluppo del codice, supportati da due test utili al fine di una corretta progettazione incentrata sull’utente.

I risultati dei test mostrano come sia stato raggiunto in maniera soddisfacente

La facilità di utilizzo è pressochè massima

L'interfaccia è chiara ed autoesplicativa

Riduce al minimo il numero di step necessari per l'esecuzione di un qualsiasi compito