SlideShare una empresa de Scribd logo
1 de 27
Corso di laurea magistrale in Teoria e
Tecnologia della Comunicazione
A.A. 2015/2016
Alessandro Confaloni | Rosario Coppola
ANALISI UI E UX DEL SITO
“SEGRETERIE ONLINE” DELL’UNIVERSITÀ
DI MILANO-BICOCCA
COS’È?
Il sito della segreteria online ufficiale riservato agli studenti dell’
Università di Milano-Bicocca.
COSA FA?
Permette di accedere a tutti i servizi di segreteria come:
➤ scelta del piano di studi
➤ visualizzazione e prenotazione appelli d’esame
➤ utilizzo area stage e tirocini
➤ pagamento tasse universitarie
SEGRETERIE ONLINE
SEGRETERIE ONLINE
SEGRETERIE ONLINE
PERCHÉ L’ABBIAMO SCELTO?
Abbiamo scelto questo servizio perché riguarda attivamente noi
ed i nostri compagni in quanto studenti ed utilizzatori finali.
OBIETTIVI
Verificare il sito in relazione ai concetti di usabilità e user
experience.
➤ Dimensione pragmatica: funzionalità e usabilità del sistema
(efficace, efficiente, facile, sicuro, utile).
➤ Dimensione estetica/edonistica: piacevolezza estetica, emotiva
e ludica del sistema.
➤ Dimensione simbolica: attributi sociali, forza del Brand,
identificazione.
PROCEDURE
Le procedure utilizzate sono:
➤ Analisi euristica esperta: eseguita dai due sperimentatori in
modo autonomo, con successivo accorpamento dei dati.
➤ Analisi euristica partecipata: tramite l’esecuzione di task
predefiniti da parte di un campione significativo di studenti.
ANALISI EURISTICA ESPERTA
1. Visibilità
2. Coerenza
3. Familiarità
4. Chiarezza
5. Navigazione
6. Controllo
7. Feedback
8. Ripristino
9. Vincoli
10. Flessibilità
11. Stile
12. Convivialità
Il sito è stato analizzato alla ricerca di violazioni delle euristiche
valutate in scala Likert (punteggi di gravità crescente da 1 a 5):
0
3
6
9
12
Numeroerrori
1 2 3 4 5
Sono state rilevate 33 violazioni.
ANALISI EURISTICA ESPERTA
ANALISI EURISTICA PARTECIPATA
➤ Compiti (Task) da far eseguire agli utenti con l’obiettivo di
verificare i problemi rilevati.
➤ Votazione sulla gravità dei problemi.
➤ Partecipazione attiva tramite cui emergono altri problemi /
suggerimenti da parte degli utenti.
TASK ANALYSIS
Task Cosa si vuole verificare
1 Trova il sito
Modalità e difficoltà di accesso al
sito
2
Trova la bacheca appelli
d’esame
Assenza funzione da sloggati
3 Torna alla home Scorretto concepimento tasto home
TASK ANALYSIS
Task Cosa si vuole verificare
4 Vai su area tirocini Problemi del menu
5
Utilizza la versione inglese
del sito
Traduzione parziale
6 Accedi da smartphone
Problemi di accesso e assenza
versione mobile
ESEMPI VIOLAZIONI
ESEMPI VIOLAZIONI
ESEMPI VIOLAZIONI
SOGGETTI INTERVISTATI
Abbiamo scelto di analizzare 3 tipologie di utenti:
➤ Area scientifica: 1 studente di Informatica e 1 di Economia
➤ Area umanistica: 1 studente di Psicologia e 1 di Scienze della
Formazione
➤ Area multidisciplinare (scientifico / umanistica): 2 studenti del
corso di Teoria e Tecnologia della Comunicazione
ASPETTATIVE
➤ Dati conformi con quanto emerso durante l’analisi euristica
esperta.
➤ Varianza dei risultati dovuta alla personalità, abitudini e
indirizzi universitari dei soggetti.
➤ Emergenza di violazioni euristiche non presenti nei task
definiti.
➤ Proposte di soluzioni ai problemi
RISULTATI TASK ANALYSIS
Task 1 Task 2 Task 3 Task 4 Task 5 Task 6
F
TTC
15 sec 1.30 min 20 sec 15 sec 15 sec 30 sec
M
TTC
15 sec 25 sec 20 sec 15 sec 10 sec 30 sec
F
Economia
10 sec 30 sec 10 sec 20 sec 15 sec 50 sec
M
Informatica
20 sec 40 sec 20 sec 15 sec 10 sec 35 sec
M
Sc. formaz.
25 sec 50 sec 10 sec 25 sec 15 sec 40 sec
F
Psicologia
25 sec 30 sec 10 sec 20 sec 5 sec 35 sec
COMPARAZIONE RISULTATI
0.0
1.0
2.0
3.0
4.0
5.0
6.0
Task 1 Task 2 Task 3 Task 4 Task 5 Task 6
Gravitàviolazione
Analisi euristica esperta Analisi euristica partecipata
Risultati in linea con quanto atteso, differenza massima di 1
valore di gravità. Task 2 e 5 i più gravi.
COMPARAZIONE RISULTATI
0
12
24
36
48
60
72
Task 1 Task 2 Task 3 Task 4 Task 5 Task 6
Tempoesecuzionetask
Area scientifica Area umanistica Area multidisciplinare
I task 2 e 6 sono stati i più difficili, richiedendo il doppio del tempo
rispetto agli altri.
PROBLEMI EMERSI
Durante l’esecuzione dei task da parte degli utenti sono emersi
ulteriori problemi:
➤ scomodità del logout automatico ogni 30 secondi
➤ difficoltà di scelta tra piano “Pre-approvato” e “Da approvare”
➤ troppe voci del menu, a volte poco chiare
➤ assenza tasto cerca
➤ parzialità dei breadcumbs
SOLUZIONI
Problema Suggerimento soluzione
1
Difficoltà e modalità di
accesso al sito
Correzione url indirizzo + SEO
(ottimizzazione sui motori di ricerca)
2
Assenza bacheca appelli
d’esame da loggati
Aggiunta funzione nel menu da
loggati
3
Scorretto concepimento tasto
home
Spostamento tasto home + logo
cliccabile
SOLUZIONI
Problema Suggerimento soluzione
4
Voce menu tirocini rimanda
alla home
Correzione link
5
Traduzione parziale sito in
inglese
Traduzione completa del sito
6
Problemi di accesso e
assenza versione mobile
Creazione versione mobile friendly +
risoluzione errore di rete
SOLUZIONI EMERSE
Ulteriori soluzioni sono stati suggeriti spontaneamente dagli
utenti:
➤ Riduzione e miglioramento voci menu
➤ Creazione di un menù a tendina
➤ Implementazione di un motore di ricerca interno
➤ Breadcrumbs su tutto il sito
➤ Possibilità di ingrandire font
DISCUSSIONE
Le due analisi effettuate hanno confermato le violazioni delle
euristiche presenti nel sito, nonché la loro gravità.
I task 2 (problemi del menu) e 5 (traduzione parziale sito in
inglese) sono quelli con una scala di valutazione più grave.
I task 2 e 6 (problemi versione mobile) sono stati quelli che
hanno mostrato maggiore difficoltà nei tempi di esecuzione.
Suggeriamo quindi di riprogettare partendo in primis dai problemi
del task 2 e proseguendo con il 5 e il 6.
DISCUSSIONE
Gli utenti sono stati un valore aggiunto per:
➤ conferma delle problematiche dei task
➤ individuazione nuove problematiche
➤ proposte di soluzioni
CONCLUSIONI
“Segreterie Online” è una piattaforma arretrata rispetto ai canoni
moderni di usabilità ed user experience.
Se la dimensione pragmatica va solo migliorata, quella estetica e
simbolica sembrano essere state ignorate dai progettisti: problemi
di layout, grafica, icona Bicocca non cliccabile o sito inglese
parziale sono percepiti come cadute di brand per l'università.
Nonostante questo, basterebbe poco affinché il sito diventi più
usabile, piacevole e centrato sugli utenti.
Grazie per l’attenzione
FINE

Más contenido relacionado

Similar a Analisi UI e UX di Segreterie Online - Università di Milano Bicocca

Laboratorio internet 10: Redazione dei contenuti
Laboratorio internet 10: Redazione dei contenutiLaboratorio internet 10: Redazione dei contenuti
Laboratorio internet 10: Redazione dei contenutiRoberto Polillo
 
8. Come valutare l’usabilità
8. Come valutare l’usabilità8. Come valutare l’usabilità
8. Come valutare l’usabilitàRoberto Polillo
 
Flss Test Plan
Flss Test PlanFlss Test Plan
Flss Test PlanSara M
 
Presentazione Tesi Laurea Magistrale
Presentazione Tesi Laurea MagistralePresentazione Tesi Laurea Magistrale
Presentazione Tesi Laurea MagistraleMatteo Vacca
 
Valutazione dell'usabilità del portale UNIBA
Valutazione dell'usabilità del portale UNIBAValutazione dell'usabilità del portale UNIBA
Valutazione dell'usabilità del portale UNIBAAntonio Notarangelo
 
Laboratorio internet: 3. Requisiti
Laboratorio internet: 3. RequisitiLaboratorio internet: 3. Requisiti
Laboratorio internet: 3. RequisitiRoberto Polillo
 
Fare debugging con il Guerrilla-Agile Usability Testing -Diana Malerba
Fare debugging con il Guerrilla-Agile Usability Testing -Diana MalerbaFare debugging con il Guerrilla-Agile Usability Testing -Diana Malerba
Fare debugging con il Guerrilla-Agile Usability Testing -Diana MalerbaGirl Geek Dinners Milano
 
Dall'usabilità delle parole all'usabilità delle interfacce
Dall'usabilità delle parole all'usabilità delle interfacceDall'usabilità delle parole all'usabilità delle interfacce
Dall'usabilità delle parole all'usabilità delle interfacceyvonne bindi
 
Esame di prototipazione e produzione web
Esame di prototipazione e produzione webEsame di prototipazione e produzione web
Esame di prototipazione e produzione webchiarart6
 
Figure libro "Il check-up dei siti Web"
Figure libro "Il check-up dei siti Web"Figure libro "Il check-up dei siti Web"
Figure libro "Il check-up dei siti Web"Roberto Polillo
 
6. Il progetto d’esame
6. Il progetto d’esame6. Il progetto d’esame
6. Il progetto d’esameRoberto Polillo
 
Presentazione Progetto Ergonomia[1]
Presentazione Progetto Ergonomia[1]Presentazione Progetto Ergonomia[1]
Presentazione Progetto Ergonomia[1]laura locati
 
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 editionLezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 editionMarco Buonvino
 
Le nuove tecnologie nella didattica esperienza di york
Le nuove tecnologie nella didattica   esperienza di york Le nuove tecnologie nella didattica   esperienza di york
Le nuove tecnologie nella didattica esperienza di york claudiadistefano
 
Users on social networks: Cinque scoperte fatte durante le attività user cent...
Users on social networks: Cinque scoperte fatte durante le attività user cent...Users on social networks: Cinque scoperte fatte durante le attività user cent...
Users on social networks: Cinque scoperte fatte durante le attività user cent...Luca Mascaro
 
Lezione5 Usability-confartigianato
Lezione5 Usability-confartigianatoLezione5 Usability-confartigianato
Lezione5 Usability-confartigianatoAndrea Vaccarella
 

Similar a Analisi UI e UX di Segreterie Online - Università di Milano Bicocca (20)

Laboratorio internet 10: Redazione dei contenuti
Laboratorio internet 10: Redazione dei contenutiLaboratorio internet 10: Redazione dei contenuti
Laboratorio internet 10: Redazione dei contenuti
 
8. Come valutare l’usabilità
8. Come valutare l’usabilità8. Come valutare l’usabilità
8. Come valutare l’usabilità
 
Flss Test Plan
Flss Test PlanFlss Test Plan
Flss Test Plan
 
Presentazione Tesi Laurea Magistrale
Presentazione Tesi Laurea MagistralePresentazione Tesi Laurea Magistrale
Presentazione Tesi Laurea Magistrale
 
Valutazione dell'usabilità del portale UNIBA
Valutazione dell'usabilità del portale UNIBAValutazione dell'usabilità del portale UNIBA
Valutazione dell'usabilità del portale UNIBA
 
Laboratorio internet: 3. Requisiti
Laboratorio internet: 3. RequisitiLaboratorio internet: 3. Requisiti
Laboratorio internet: 3. Requisiti
 
Fare debugging con il Guerrilla-Agile Usability Testing -Diana Malerba
Fare debugging con il Guerrilla-Agile Usability Testing -Diana MalerbaFare debugging con il Guerrilla-Agile Usability Testing -Diana Malerba
Fare debugging con il Guerrilla-Agile Usability Testing -Diana Malerba
 
Dall'usabilità delle parole all'usabilità delle interfacce
Dall'usabilità delle parole all'usabilità delle interfacceDall'usabilità delle parole all'usabilità delle interfacce
Dall'usabilità delle parole all'usabilità delle interfacce
 
Agile UX - AR Meetup
Agile UX - AR MeetupAgile UX - AR Meetup
Agile UX - AR Meetup
 
Esame di prototipazione e produzione web
Esame di prototipazione e produzione webEsame di prototipazione e produzione web
Esame di prototipazione e produzione web
 
Figure libro "Il check-up dei siti Web"
Figure libro "Il check-up dei siti Web"Figure libro "Il check-up dei siti Web"
Figure libro "Il check-up dei siti Web"
 
Magistreet.pdf
Magistreet.pdfMagistreet.pdf
Magistreet.pdf
 
Ergonomia app esselunga
Ergonomia app esselunga Ergonomia app esselunga
Ergonomia app esselunga
 
6. Il progetto d’esame
6. Il progetto d’esame6. Il progetto d’esame
6. Il progetto d’esame
 
Flyers
FlyersFlyers
Flyers
 
Presentazione Progetto Ergonomia[1]
Presentazione Progetto Ergonomia[1]Presentazione Progetto Ergonomia[1]
Presentazione Progetto Ergonomia[1]
 
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 editionLezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
 
Le nuove tecnologie nella didattica esperienza di york
Le nuove tecnologie nella didattica   esperienza di york Le nuove tecnologie nella didattica   esperienza di york
Le nuove tecnologie nella didattica esperienza di york
 
Users on social networks: Cinque scoperte fatte durante le attività user cent...
Users on social networks: Cinque scoperte fatte durante le attività user cent...Users on social networks: Cinque scoperte fatte durante le attività user cent...
Users on social networks: Cinque scoperte fatte durante le attività user cent...
 
Lezione5 Usability-confartigianato
Lezione5 Usability-confartigianatoLezione5 Usability-confartigianato
Lezione5 Usability-confartigianato
 

Analisi UI e UX di Segreterie Online - Università di Milano Bicocca

  • 1. Corso di laurea magistrale in Teoria e Tecnologia della Comunicazione A.A. 2015/2016 Alessandro Confaloni | Rosario Coppola ANALISI UI E UX DEL SITO “SEGRETERIE ONLINE” DELL’UNIVERSITÀ DI MILANO-BICOCCA
  • 2. COS’È? Il sito della segreteria online ufficiale riservato agli studenti dell’ Università di Milano-Bicocca. COSA FA? Permette di accedere a tutti i servizi di segreteria come: ➤ scelta del piano di studi ➤ visualizzazione e prenotazione appelli d’esame ➤ utilizzo area stage e tirocini ➤ pagamento tasse universitarie SEGRETERIE ONLINE
  • 4. SEGRETERIE ONLINE PERCHÉ L’ABBIAMO SCELTO? Abbiamo scelto questo servizio perché riguarda attivamente noi ed i nostri compagni in quanto studenti ed utilizzatori finali.
  • 5. OBIETTIVI Verificare il sito in relazione ai concetti di usabilità e user experience. ➤ Dimensione pragmatica: funzionalità e usabilità del sistema (efficace, efficiente, facile, sicuro, utile). ➤ Dimensione estetica/edonistica: piacevolezza estetica, emotiva e ludica del sistema. ➤ Dimensione simbolica: attributi sociali, forza del Brand, identificazione.
  • 6. PROCEDURE Le procedure utilizzate sono: ➤ Analisi euristica esperta: eseguita dai due sperimentatori in modo autonomo, con successivo accorpamento dei dati. ➤ Analisi euristica partecipata: tramite l’esecuzione di task predefiniti da parte di un campione significativo di studenti.
  • 7. ANALISI EURISTICA ESPERTA 1. Visibilità 2. Coerenza 3. Familiarità 4. Chiarezza 5. Navigazione 6. Controllo 7. Feedback 8. Ripristino 9. Vincoli 10. Flessibilità 11. Stile 12. Convivialità Il sito è stato analizzato alla ricerca di violazioni delle euristiche valutate in scala Likert (punteggi di gravità crescente da 1 a 5):
  • 8. 0 3 6 9 12 Numeroerrori 1 2 3 4 5 Sono state rilevate 33 violazioni. ANALISI EURISTICA ESPERTA
  • 9. ANALISI EURISTICA PARTECIPATA ➤ Compiti (Task) da far eseguire agli utenti con l’obiettivo di verificare i problemi rilevati. ➤ Votazione sulla gravità dei problemi. ➤ Partecipazione attiva tramite cui emergono altri problemi / suggerimenti da parte degli utenti.
  • 10. TASK ANALYSIS Task Cosa si vuole verificare 1 Trova il sito Modalità e difficoltà di accesso al sito 2 Trova la bacheca appelli d’esame Assenza funzione da sloggati 3 Torna alla home Scorretto concepimento tasto home
  • 11. TASK ANALYSIS Task Cosa si vuole verificare 4 Vai su area tirocini Problemi del menu 5 Utilizza la versione inglese del sito Traduzione parziale 6 Accedi da smartphone Problemi di accesso e assenza versione mobile
  • 15. SOGGETTI INTERVISTATI Abbiamo scelto di analizzare 3 tipologie di utenti: ➤ Area scientifica: 1 studente di Informatica e 1 di Economia ➤ Area umanistica: 1 studente di Psicologia e 1 di Scienze della Formazione ➤ Area multidisciplinare (scientifico / umanistica): 2 studenti del corso di Teoria e Tecnologia della Comunicazione
  • 16. ASPETTATIVE ➤ Dati conformi con quanto emerso durante l’analisi euristica esperta. ➤ Varianza dei risultati dovuta alla personalità, abitudini e indirizzi universitari dei soggetti. ➤ Emergenza di violazioni euristiche non presenti nei task definiti. ➤ Proposte di soluzioni ai problemi
  • 17. RISULTATI TASK ANALYSIS Task 1 Task 2 Task 3 Task 4 Task 5 Task 6 F TTC 15 sec 1.30 min 20 sec 15 sec 15 sec 30 sec M TTC 15 sec 25 sec 20 sec 15 sec 10 sec 30 sec F Economia 10 sec 30 sec 10 sec 20 sec 15 sec 50 sec M Informatica 20 sec 40 sec 20 sec 15 sec 10 sec 35 sec M Sc. formaz. 25 sec 50 sec 10 sec 25 sec 15 sec 40 sec F Psicologia 25 sec 30 sec 10 sec 20 sec 5 sec 35 sec
  • 18. COMPARAZIONE RISULTATI 0.0 1.0 2.0 3.0 4.0 5.0 6.0 Task 1 Task 2 Task 3 Task 4 Task 5 Task 6 Gravitàviolazione Analisi euristica esperta Analisi euristica partecipata Risultati in linea con quanto atteso, differenza massima di 1 valore di gravità. Task 2 e 5 i più gravi.
  • 19. COMPARAZIONE RISULTATI 0 12 24 36 48 60 72 Task 1 Task 2 Task 3 Task 4 Task 5 Task 6 Tempoesecuzionetask Area scientifica Area umanistica Area multidisciplinare I task 2 e 6 sono stati i più difficili, richiedendo il doppio del tempo rispetto agli altri.
  • 20. PROBLEMI EMERSI Durante l’esecuzione dei task da parte degli utenti sono emersi ulteriori problemi: ➤ scomodità del logout automatico ogni 30 secondi ➤ difficoltà di scelta tra piano “Pre-approvato” e “Da approvare” ➤ troppe voci del menu, a volte poco chiare ➤ assenza tasto cerca ➤ parzialità dei breadcumbs
  • 21. SOLUZIONI Problema Suggerimento soluzione 1 Difficoltà e modalità di accesso al sito Correzione url indirizzo + SEO (ottimizzazione sui motori di ricerca) 2 Assenza bacheca appelli d’esame da loggati Aggiunta funzione nel menu da loggati 3 Scorretto concepimento tasto home Spostamento tasto home + logo cliccabile
  • 22. SOLUZIONI Problema Suggerimento soluzione 4 Voce menu tirocini rimanda alla home Correzione link 5 Traduzione parziale sito in inglese Traduzione completa del sito 6 Problemi di accesso e assenza versione mobile Creazione versione mobile friendly + risoluzione errore di rete
  • 23. SOLUZIONI EMERSE Ulteriori soluzioni sono stati suggeriti spontaneamente dagli utenti: ➤ Riduzione e miglioramento voci menu ➤ Creazione di un menù a tendina ➤ Implementazione di un motore di ricerca interno ➤ Breadcrumbs su tutto il sito ➤ Possibilità di ingrandire font
  • 24. DISCUSSIONE Le due analisi effettuate hanno confermato le violazioni delle euristiche presenti nel sito, nonché la loro gravità. I task 2 (problemi del menu) e 5 (traduzione parziale sito in inglese) sono quelli con una scala di valutazione più grave. I task 2 e 6 (problemi versione mobile) sono stati quelli che hanno mostrato maggiore difficoltà nei tempi di esecuzione. Suggeriamo quindi di riprogettare partendo in primis dai problemi del task 2 e proseguendo con il 5 e il 6.
  • 25. DISCUSSIONE Gli utenti sono stati un valore aggiunto per: ➤ conferma delle problematiche dei task ➤ individuazione nuove problematiche ➤ proposte di soluzioni
  • 26. CONCLUSIONI “Segreterie Online” è una piattaforma arretrata rispetto ai canoni moderni di usabilità ed user experience. Se la dimensione pragmatica va solo migliorata, quella estetica e simbolica sembrano essere state ignorate dai progettisti: problemi di layout, grafica, icona Bicocca non cliccabile o sito inglese parziale sono percepiti come cadute di brand per l'università. Nonostante questo, basterebbe poco affinché il sito diventi più usabile, piacevole e centrato sugli utenti.