studio e sviluppo di un’interfaccia per applicazione web 2.0
DESCRIPTION
Come tesi di laurea triennale ho sviluppato un interfaccia per un'applicazione web sportiva.TRANSCRIPT
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