Documento sul Design - Progetto SmartPark per il corso di Interazione Uomo-Macchina ed Usabilità del Software. Corso di Laurea Magistrale in Informatica - Università degli Studi di Salerno
1. Università degli Studi di Salerno
Dipartimento di Informatica
Corso di laurea Magistrale in Informatica
Corso di Interazione Uomo Macchina e Usabilità del Software
Documento sul Design
SMARTPARK: un parcheggio veloce ed intelligente
La docente
Prof. ssa Giuliana Vitiello
Email: gvitiello@unisa.it
Il Team 1
Gianmarco Beato 0522500782
Daniele Bifolco 0522501044
Riccardo D’Avino 0522501084
Federico Ripoli 0522500921
Anno Accademico 2021/2022
Assignment 2:
2.
3. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – INDICE 1
Indice
1. Activity Scenarios………………………………………………………………………………………...3
1.1 Activity Scenario 1............................................................................................................................... 3
1.2 Activity Scenario 2............................................................................................................................... 4
1.3 Activity Scenario 3............................................................................................................................... 5
1.4 Metafore contestuali ............................................................................................................................. 6
2. Information Scenarios…………………………………………………………………………………….7
2.1 Information Scenario 1......................................................................................................................... 7
2.2 Information Scenario 2......................................................................................................................... 8
2.3 Information Scenario 3......................................................................................................................... 9
2.4 Metafore contestuali ........................................................................................................................... 10
3. Interaction Scenarios…………………………………………………………………………………….11
3.1 Interaction Scenario 1......................................................................................................................... 11
3.2 Interaction Scenario 2......................................................................................................................... 12
3.3 Interaction Scenario 3......................................................................................................................... 13
3.4 Metafore contestuali ........................................................................................................................... 14
4. Mockup e Storyboard……………………………………………………………………………………15
4.1 Storyboard – Scenario 1 – Ricerca Parcheggio (mappa).................................................................... 15
4.2 Storyboard – Scenario 2 – Modifica Scadenza Grattino..................................................................... 16
4.3 Storyboard – Previsione disponibilità................................................................................................. 17
4.4 Storyboard – Pagamento parcheggio.................................................................................................. 18
4.5 Storyboard– Ricerca Parcheggio (dove vuoi andare) ......................................................................... 18
4.6 Storyboard – Ricerca Parcheggio in base a punto di interesse ........................................................... 19
4.7 Mockup............................................................................................................................................... 20
5. Cognitive Walkthrough………………………………………………………………………………….21
5.1 Task “Cerca parcheggio”..................................................................................................................... 21
5.2 Task “Modifica durata ticket” ............................................................................................................. 22
5.3 Task “Paga parcheggio” ...................................................................................................................... 23
6. Valutazione euristica…………………………………………………………………………………….25
6.1 Pagamento di un ticket ......................................................................................................................... 25
6.2 Ricerca di un parcheggio...................................................................................................................... 26
6.3 Previsione della disponibilità di parcheggio......................................................................................... 27
7. Specifiche di usabilità…………………………………………………………………………………...29
4. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN 2
5. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – ACTIVITY SCENARIOS 3
1. Activity Scenarios
1.1 Activity Scenario 1
Problem Scenario
Mario e sua moglie sono stati invitati a cena a casa di loro amici, che vivono in periferia. Stamattina Mario ha
ritirato la sua nuova auto dal concessionario e non vuole lasciarla in strada perché ha paura. Si ricorda che nei
pressi dell’abitazione vi è un garage privato custodito aperto 24/24. Il garage non è molto vicino alla casa degli
amici, ma questo non è un problema poiché sia Mario che sua moglie adorano passeggiare. Arrivati sul posto
Mario si accorge che il garage in realtà chiude alle 21:00, a quel punto è costretto a perdere tempo alla ricerca
di un altro parcheggio custodito. Trovato un altro garage Mario sceglie il posto più isolato in quanto avendo
appena comprato la macchina non riesce ancora ad effettuare parcheggi ad S. Al ritorno Mario inserisce la
propria carta di credito e paga il parcheggio.
Activity Scenario
Mario e sua moglie sono stati invitati a cena a casa di loro amici, che vivono in periferia. Stamattina Mario ha
ritirato la sua nuova auto dal concessionario e non vuole lasciarla in strada perché ha paura. Si ricorda che nei
pressi dell’abitazione vi è un garage privato custodito aperto 24/24 che non è molto vicino alla casa degli amici,
ma questo non è un problema poiché sia Mario che sua moglie adorano passeggiare. Mario avvia l’applicazione
e verifica la disponibilità del parcheggio e si accorge che il garage chiude alle 21:00. A questo punto grazie
all’applicazione, cerca un altro parcheggio custodito nei dintorni ed avvia il navigatore che lo porta fino a
destinazione. Inoltre, una volta giunto sul posto, l’applicazione gli mostra sulla mappa i posti disponibili così
che Mario scelga quello più spazioso per evitare fastidiose manovre ad S.
Claims
Situation feature Pros(+) e Cons(-)
Utilizzo del navigatore + bassa probabilità di sbagliare strada
Utilizzo della mappa + scelta del posto auto più appropriato in base alle
esigenze
6. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – ACTIVITY SCENARIOS 4
1.2 Activity Scenario 2
Problem Scenario
Una mattina, Gianluca si reca sul corso principale dove deve consegnare la spesa a circa 10 famiglie. È alla
ricerca di uno spazio abbastanza capiente dove parcheggiare il suo furgone, non riuscendo a trovarlo, chiede
informazioni ai passanti che gli indicano una zona. Riesce fortunatamente a trovare parcheggio in un’area di
sosta comunale e provvede a pagare il grattino, per un tempo di circa 30 minuti, presso la colonnina adibita.
Mentre effettua le consegne, si accorge che gliene mancano ancora 3 e che il grattino sta per scadere. Cerca di
affrettarsi ma non ce la fa. Sapendo che i vigili urbani della cittadina sono molto severi, tenta di fare una corsa
per raggiungere il parcheggio e prolungare il grattino, ma arriva in ritardo, quando ormai trova già la multa.
Activity Scenario
Una mattina, Gianluca si reca sul corso principale dove deve consegnare la spesa a circa 10 famiglie. Dopo
essere riuscito a trovare parcheggio in un’area di sosta comunale, provvede a pagare il grattino, per un tempo
di circa 30 minuti, tramite l’applicazione dedicata. Mentre effettua le consegne, si accorge che gliene mancano
ancora 3 e che il grattino sta per scadere. A questo punto Gianluca avvia l’applicazione e modifica il tempo di
sosta prolungandolo di altri 15 minuti; in questo modo Gianluca si sente più rilassato ed evita il rischio di
beccare una fastidiosa multa.
Claims
Situation feature Pros(+) e Cons(-)
Modifica del tempo di sosta + modifica del tempo di sosta in qualsiasi momento
- necessità di una connessione dati
7. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – ACTIVITY SCENARIOS 5
1.3 Activity Scenario 3
Problem Scenario
Marco si sveglia verso le 8:30, fa una colazione veloce e inizia subito a lavorare. Verso le 11:30 decide di
prendere una pausa e andare a prendere un caffè in centro vista la bella giornata di sole, ogni mattina cerca di
cambiare bar in quanto odia la monotonia. Prima di prendere l’auto svolge una rapida ricerca su Google Maps,
in quanto preferisce disattivare la localizzazione quando è in giro, per studiare la zona e farsi un’idea di dove
parcheggiare. Arrivato a destinazione non trova parcheggio davanti al bar quindi come spesso accade gira nei
dintorni in cerca di un posto libero. Pur trovandoli sulla strada, odia camminare e quindi cerca di trovarlo
quanto più vicino al bar. Quando finalmente vede un’auto che sta liberando un posto accende le 4 frecce e si
ferma in mezzo alla strada in attesa di poter parcheggiare. La persona nell’auto che sta liberando il posto non
curante del traffico che si è generato se la prende comoda così che gli automobilisti in coda a Marco iniziano
a suonare il clacson e a lamentarsi. Quando Marco riesce a parcheggiare dopo aver fatto più manovre a causa
di un parcheggio non corretto delle altre vetture sulla strada, scende dall’auto tutt’altro che calmo e rilassato,
inoltre si accorge di aver parcheggiato in un posto a pagamento. Non avendo con sé monete e non volendo
pagare con la carta, poiché paga solo con PayPal, decide di rischiare di prendere una multa pur di prendersi il
caffè. Neanche il tempo di prenderlo che sono già le 12:00 e deve rientrare a casa per continuare a lavorare.
Activity Scenario
Marco si sveglia verso le 8:30, fa una colazione veloce e inizia subito a lavorare. Verso le 11:30 decide di
prendere una pausa e andare a prendere un caffè in centro vista la bella giornata di sole. Prima di uscire di casa
per evitare di perdere tempo, avvia l’applicazione e cerca un bar in centro con un parcheggio non molto
distante. L’applicazione gli mostra diversi bar con la relativa disponibilità di parcheggio. Una volta scelto il
bar e capito come ci si arriva si avvia. Arrivato a destinazione trova parcheggio davanti al bar, scende dall’auto
e provvede al pagamento del grattino con l’applicazione dedicata scegliendo come metodo di pagamento
elettronico, PayPal, in quanto lo ritiene il più sicuro. In questo modo Marco si prende tranquillamente il suo
caffè evitando lo stress per la ricerca di un parcheggio e di prendersi una multa.
Claims
Situation feature Pros(+) e Cons(-)
Ricerca parcheggio per luogo d’interesse + individuazione del luogo con più posti auto
disponibili
+ possibilità di aggiunta filtri di ricerca
Pagamento elettronico + scelta del metodo di pagamento che si ritiene più
sicuro e comodo
- necessità di possedere del credito
8. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – ACTIVITY SCENARIOS 6
1.4 Metafore contestuali
Interazioni Metafora del mondo reale
Ricerca parcheggio per luogo d’interesse Funzionalità di ricerca con filtri su Amazon
Pagamento elettronico Pagare le bollette alla posta
9. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – INFORMATION SCENARIOS 7
2. Information Scenarios
2.1 Information Scenario 1
Information Scenario
● Mario e sua moglie sono stati invitati a cena a casa di loro amici.
● Mario ha da poco ritirato la sua nuova macchina e dato che non vuole lasciarla per strada, si ricorda
che nei pressi dell’abitazione dei suoi amici vi è un garage aperto 24/24.
● Mario avvia l’applicazione SmartPark e dopo essersi precedentemente registrato, nella schermata
principale cerca il garage e dalle informazioni che gli vengono mostrate si accorge che chiude alle
21:00.
● Sulla mappa gli vengono mostrati anche altri parcheggi individuatati da icone colorate:
- P su sfondo blu, indica un parcheggio custodito;
- P su sfondo azzurro, indica un parcheggio a pagamento non custodito;
- P su sfondo verde, indica un parcheggio gratuito;
● Tra i vari parcheggi custoditi, Mario sceglie quello che ha una disponibilità maggiore, controllando
l’indicatore di disponibilità.
● Avvia il navigatore e si dirige sul posto.
● Arrivato nel parcheggio, apre l’applicazione e controlla tramite la mappa in real-time, quali sono i
posti disponibili indicati dal colore verde.
● Scelto il posto più adeguato per evitare manovre ad S, Mario provvede a parcheggiare.
● Finite queste operazioni, chiude l’applicazione e si reca a casa degli amici.
Claims
Situation feature Pros(+) e Cons(-)
Ricerca di un luogo + possibilità di visionare i parcheggi di una certa zona
+ verifica real-time dei posti disponibili
- necessità di una connessione dati
10. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – INFORMATION SCENARIOS 8
2.2 Information Scenario 2
Information Scenario
● Una mattina, Gianluca si reca sul corso principale dove deve consegnare la spesa a circa 10 famiglie.
● Dopo aver trovato parcheggio, paga il grattino tramite l’app SmartPark, inserisce la durata ruotando
il pulsante centrale.
● Mentre effettua le consegne gli arriva una notifica dall’applicazione SmartPark che lo avvisa
sull’imminente scadenza del grattino.
● Gianluca avvia l’applicazione SmartPark.
● Nella schermata principale seleziona lo storico dei pagamenti.
● Visualizza il pagamento in corso.
● Effettua l’opportuna modifica di 15 minuti.
● Effettua il pagamento.
● Finite queste operazioni, chiude l’applicazione e si dedica a terminare le consegne.
Claims
Situation feature Pros(+) e Cons(-)
Modifica della durata del grattino + possibilità di evitare multe
- necessità di una connessione dati
11. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – INFORMATION SCENARIOS 9
2.3 Information Scenario 3
Information Scenario
● Marco si sveglia verso le 8:30, fa una rapida colazione ed inizia a lavorare.
● Alle 11:30 decide di prendersi una pausa caffè.
● Prima di uscire di casa avvia l’applicazione SmartPark, selezionando il tab “Dove vuoi andare?”
inserisce come luogo d’interesse: Bar, e selezione come distanza massima da percorrere a piedi 50
metri.
● L’applicazione restituisce un elenco dei bar, nei dintorni, che abbiano un parcheggio con le
caratteristiche specificate, mostrando per ognuno un indicatore di disponibilità.
● Marco arrivato a destinazione avvia l’applicazione SmartPark e provvede al pagamento.
● Nella schermata relativa al pagamento, seleziona il parcheggio nel quale si trova.
● Successivamente, seleziona la targa del proprio veicolo e come metodo di pagamento sceglie PayPal.
● Infine, imposta il grattino per una durata di 30 minuti ed effettua il pagamento.
● Finite queste operazioni, chiude l’applicazione e si dedica alla pausa caffè.
Claims
Situation feature Pros(+) e Cons(-)
Ricerca di un luogo + possibilità di ricercare un luogo in base alla
disponibilità di parcheggio
- necessità di una connessione dati
Pagamento con paypal + maggiore sicurezza del pagamento
- necessità di una connessione dati
- necessità di possedere del credito
12. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – INFORMATION SCENARIOS 10
2.4 Metafore contestuali
Interazioni Metafora del mondo reale
Ricerca di un luogo Ricerca su Google Maps
Modifica della durata del grattino Modifica del tempo di cottura di un forno elettrico
13. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – INTERACTION SCENARIOS 11
3. Interaction Scenarios
3.1 Interaction Scenario 1
Interaction Scenario
● Mario sblocca il suo smartphone e clicca sull’icona dell’applicazione SmartPark.
● Dalla home clicca sul box “Indirizzo” e inserisce il nome del parcheggio.
● Sulla mappa gli viene mostrato il parcheggio che ha cercato con le relative informazioni e altri nei
dintorni.
● Leggendo le informazioni si accorge che il parcheggio chiude alle 21:00.
● Seleziona quindi un altro parcheggio custodito dalla mappa.
● Sulla mappa clicca sul simbolo “P” relativo al parcheggio “ChiaiaPark”.
● Viene mostrato un piccolo riepilogo del parcheggio e da lì clicca sul pulsante “AVVIA NAV”.
● Viene avviato il navigatore di “Google Maps”.
● Arrivato sul posto clicca sul medesimo simbolo “P” presente sulla mappa.
● Nel riepilogo mostrato clicca sul pulsante “VISUALIZZA”.
● Viene mostrata una schermata che mostra i posti liberi ed occupati del medesimo parcheggio.
● Mario sceglie il posto a lui adeguato e parcheggia.
● Al termine Mario chiude l’applicazione SmartPark.
Claims
Situation feature Pros(+) e Cons(-)
Ricerca di un luogo + possibilità di visionare i parcheggi di una certa zona
+ verifica real-time dei posti disponibili
- necessità di una connessione dati
14. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – INTERACTION SCENARIOS 12
3.2 Interaction Scenario 2
Interaction Scenario
● Gianluca sblocca il suo smartphone e clicca sull’icona dell’app SmartPark.
● Dalla home clicca sul pulsante “storico” presente in alto a destra di fianco al logo.
● Si apre una schermata che mostra 2 tab: i pagamenti “in corso” e lo “storico” dei pagamenti.
● Nella prima tab viene visualizzato il grattino corrente.
● Clicca sul tasto “MODIFICA”.
● Si apre una schermata che mostra un pulsante rotatorio per la modifica dell’ora.
● Gira il pulsante fino a selezionare 12:30.
● Infine clicca sul pulsante “PAGA”.
● Al termine Gianluca chiude l’applicazione SmartPark.
Claims
Situation feature Pros(+) e Cons(-)
Modifica della durata del grattino + possibilità di evitare multe
- necessità di una connessione dati
15. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – INTERACTION SCENARIOS 13
3.3 Interaction Scenario 3
Interaction Scenario
● Marco sblocca il suo smartphone e clicca sull’icona dell’app SmartPark.
● Dalla home clicca sul tab “Dove vuoi andare?”.
● Inserisce nella barra di ricerca, inserisce come luogo d’interesse “Bar”.
● Dai filtri disponibili selezione la distanza massima da percorre a piedi il valore “< 50 m”.
● Clicca sul pulsante “Cerca” per avviare la ricerca.
● Viene visualizzato un pop-up che lo invita ad attivare la geo-localizzazione oppure ad inserire un
indirizzo.
● Marco inserisce un indirizzo.
● Visualizza quindi un elenco dei bar nei dintorni dell’indirizzo specificato, con le relative diponibilità
di parcheggio.
● Dall’elenco visualizzato clicca il pulsante “Visualizza sulla mappa”.
● Marco arrivato a destinazione, clicca sul tab “Paga parcheggio”.
● Viene mostrata una schermata dove Marco inserisce vari dati.
● Per prima cosa inserisce il nome del parcheggio dove si trova: “Parcheggio Alba”.
● Dopodiché seleziona la targa de suo veicolo FE459BG, precedentemente registrata.
● Poi seleziona “PayPal” come metodo di pagamento.
● Clicca sul pulsante rotatorio per impostare la durata del grattino, e ruota il pulsante fino ad arrivare
alle 12:30 (durata di 30 minuti).
● Infine, clicca sul pulsante “Paga”.
● Al termine Gianluca chiude l’applicazione SmartPark.
Claims
Situation feature Pros(+) e Cons(-)
Pagamento con PayPal + maggiore sicurezza del pagamento
- necessità di una connessione dati
- necessità di possedere del credito
16. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – INTERACTION SCENARIOS 14
3.4 Metafore contestuali
Interazioni Metafora del mondo reale
Ricerca di un luogo Ricerca su Google Maps
Modifica della durata del grattino Modifica del tempo di cottura di un forno elettrico
17. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – MOCKUP E STORYBOARD 15
4. Mockup e Storyboard
4.1 Storyboard – Scenario 1 – Ricerca Parcheggio (mappa)
18. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – MOCKUP E STORYBOARD 16
4.2 Storyboard – Scenario 2 – Modifica Scadenza Grattino
19. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – MOCKUP E STORYBOARD 17
4.3 Storyboard – Previsione disponibilità
20. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – MOCKUP E STORYBOARD 18
4.4 Storyboard – Pagamento parcheggio
21. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – MOCKUP E STORYBOARD 19
4.5 Storyboard– Ricerca Parcheggio (dove vuoi andare)
4.6 Storyboard – Ricerca Parcheggio in base a punto di interesse
22. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – MOCKUP E STORYBOARD 20
4.7 Mockup
I mockup interattivi sono stati realizzati con MarvelApp e sono reperibili al seguente link:
https://marvelapp.com/prototype/hcj0j14
23. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – COGNITIVE WALKTHROUGH 21
5. Cognitive Walkthrough
5.1 Task “Cerca parcheggio”
Azione Analisi
Dalla home clicca sul tab “Dove vuoi
andare?”
• L’azione corretta è abbastanza intuitiva per l’utente?
Sì, il bottone è facilmente individuabile nella schermata
Home.
• L’utente noterà che l’azione è disponibile?
Sì, l’utente noterà che fa parte di un menu orizzontale.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, dopo aver premuto il pulsante lo schermo mostra un
form di ricerca.
Inserisce nelle apposite caselle “Via Chiaia -
Napoli”, “550m - 800m”, “Privato”, “21:00”
• L’azione corretta è abbastanza intuitiva per l’utente?
Sì, nelle caselle da riempire è indicato cosa viene
richiesto.
• L’utente noterà che l’azione è disponibile?
Sì, sullo schermo sono presenti tutte le caselle da
riempire.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, vedrà che le caselle sono state riempite dai valori
scelti.
Al termine clicca sul pulsante “CERCA” • L’azione corretta è abbastanza intuitiva per l’utente?
Sì, è intuitivo che premendo quel tasto vengano mostrati i
risultati della ricerca.
• L’utente noterà che l’azione è disponibile?
Sì, il tasto cambia colore quando viene inserito un
numero minimo di dati per la ricerca.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, lo schermo mostrerà una mappa del luogo cercato.
Sulla mappa clicca sul simbolo “P” relativo
al parcheggio “ChiaiaPark”
• L’azione corretta è abbastanza intuitiva per l’utente?
Sì, l’utente noterà che sono presenti queste “P” sulla
mappa; quindi, proverà a premerle come farebbe su
Google Maps.
• L’utente noterà che l’azione è disponibile?
No, possono essere presenti diverse “P”; quindi, l’utente
potrebbe non capire a quale parcheggio facciano
riferimento.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, comparirà un pop-up con delle operazioni disponibili.
Clicca sul pulsante “AVVIA NAV” • L’azione corretta è abbastanza intuitiva per l’utente?
Sì, il tasto è di facile comprensione.
• L’utente noterà che l’azione è disponibile?
Sì, il pop-up fornisce due operazioni precise e distinte.
24. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – COGNITIVE WALKTHROUGH 22
• L’utente capirà di aver eseguito l’azione giusta?
Sì, si aprirà Google Maps con il navigatore attivo verso
la destinazione.
Arrivato sul posto clicca sul medesimo
simbolo “P” presente sulla mappa
• L’azione corretta è abbastanza intuitiva per l’utente?
Sì, l’utente noterà che sono presenti queste “P” sulla
mappa; quindi, proverà a premerle come farebbe su
Google Maps.
• L’utente noterà che l’azione è disponibile?
Sì, l’utente ha già eseguito la stessa operazione in
precedenza.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, comparirà un pop-up con delle operazioni disponibili.
Nel riepilogo mostrato clicca sul pulsante
“VISUALIZZA” per ispezionare i posti
disponibili
• L’azione corretta è abbastanza intuitiva per l’utente?
Sì, il tasto è di facile comprensione.
• L’utente noterà che l’azione è disponibile?
Sì, il pop-up fornisce due operazioni precise e distinte.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, lo schermo mostrerà una mappa con una serie di posti
auto.
5.2 Task “Modifica durata ticket”
Azione Analisi
Dalla home clicca sul pulsante “storico”
presente in alto a destra di fianco al logo
• L’azione corretta è abbastanza intuitiva per l’utente?
Sì, l’icona del pulsante ricorda l’icona della
“Cronologia” presente su Chrome per smartphone.
• L’utente noterà che l’azione è disponibile?
Sì, l’icona è ben visibile.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, lo schermo mostrerà una pagina con le informazioni
dei ticket “in corso”.
Dal tab “in corso” trova il ticket che vuole
modificare, e preme sul tasto “MODIFICA”
• L’azione corretta è abbastanza intuitiva per l’utente?
Sì, il tasto “MODIFICA” è di facile comprensione.
• L’utente noterà che l’azione è disponibile?
Sì, il tasto è presente sotto ogni ticket attivo.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, sullo schermo verrà mostrata una finestra con una
serie di campi editabili.
Sulla schermata viene mostrato un pulsante
rotatorio che l’utente gira fino a selezionare
12:30
• L’azione corretta è abbastanza intuitiva per l’utente?
No, l’utente potrebbe provare a modificarlo cliccando
sopra l’orario, invece di ruotare il cerchio esterno.
• L’utente noterà che l’azione è disponibile?
No, a meno che non abbia già usato App simili per il
pagamento di ticket (es. EasyPark).
25. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – COGNITIVE WALKTHROUGH 23
• L’utente capirà di aver eseguito l’azione giusta?
Sì, ruotando la manopola, il valore al centro di essa verrà
modificato.
Clicca sul pulsante “PAGA” • L’azione corretta è abbastanza intuitiva per l’utente?
Sì, il tasto è di facile comprensione per l’utente.
• L’utente noterà che l’azione è disponibile?
Sì, in molte App, il tasto per confermare acquisti o
pagamenti è in fondo allo schermo.
• L’utente capirà di aver eseguito l’azione giusta?
5.3 Task “Paga parcheggio”
Azione Analisi
Dalla home clicca sul tab “Paga parcheggio” • L’azione corretta è abbastanza intuitiva per l’utente?
Sì, il pulsante è di facile comprensione.
• L’utente noterà che l’azione è disponibile?
Sì, il pulsante è visibile nel menu in fondo allo schermo.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, lo schermo mostrerà un form per il pagamento.
Nel form seleziona il parcheggio “Alba”, la
targa della sua auto, e il metodo di
pagamento PayPal.
• L’azione corretta è abbastanza intuitiva per l’utente?
Sì, i campi editabili forniscono informazioni su ciò che
l’utente deve inserire
• L’utente noterà che l’azione è disponibile?
Sì, i campi del form sono ben identificati.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, l’utente noterà che i campi sono stati riempiti con i
dati da lui inseriti.
Clicca sul pulsante “PROCEDI CON IL
PAGAMENTO”
• L’azione corretta è abbastanza intuitiva per l’utente?
No, l’utente cercherà di capire dove inserire il tempo di
sosta prima di procedere.
• L’utente noterà che l’azione è disponibile?
Sì, in molte App il tasto per “Andare avanti” è in fondo
allo schermo.
• L’utente capirà di aver eseguito l’azione giusta?
Sì, sullo schermo comparirà un pulsante rotatorio per
selezionare il tempo di sosta.
Clicca sul pulsante rotatorio per impostare la
durata del grattino, e ruota il pulsante fino ad
arrivare alle 12:30
• L’azione corretta è abbastanza intuitiva per l’utente?
No, l’utente potrebbe provare a modificarlo cliccando
sopra l’orario, invece di ruotare il cerchio esterno.
• L’utente noterà che l’azione è disponibile?
No, a meno che non abbia già usato App simili per il
pagamento di ticket (es. EasyPark).
• L’utente capirà di aver eseguito l’azione giusta?
Sì, ruotando la manopola, il valore al centro di essa
verrà modificato.
26. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – COGNITIVE WALKTHROUGH 24
Clicca sul pulsante “PAGA” • L’azione corretta è abbastanza intuitiva per l’utente?
Sì, il tasto è di facile comprensione per l’utente.
• L’utente noterà che l’azione è disponibile?
Sì, in molte App, il tasto per confermare acquisti o
pagamenti è in fondo allo schermo.
• L’utente capirà di aver eseguito l’azione giusta?
5.4 Conclusioni e criticità
Il sistema è stato progettato partendo dallo studio di app esistenti e di comune utilizzo. Per utenti che sfruttano
pienamente i dispositivi mobile, il sistema è abbastanza intuibile. Per utenti meno esperti o che hanno usato
sempre le funzionalità di base di molte App, è più complesso: un esempio è il pulsante dello “storico” che
molti potrebbero non aver mai visto su Chrome. La funzionalità che potrebbe portare a un maggior numero di
errori è il pagamento di un ticket perché non è molto intuitivo per l’utente inserire prima i dati di pagamento e
poi, nella pagina successiva, il tempo di sosta.
27. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – VALUTAZIONE EURISTICA 25
6. Valutazione euristica
Al fine di individuare eventuali criticità del sistema, abbiamo svolto una valutazione euristica su tre operazioni
principali del sistema:
• Pagamento di un ticket;
• Ricerca di un parcheggio;
• Previsione della disponibilità di parcheggio.
6.1 Pagamento di un ticket
ID Principio Problema Soluzione
Visibilità dello
stato del sistema
Il principio è stato
applicato correttamente
- Quando il sistema
richiede molto tempo per
rispondere, mostra
un’icona di caricamento
Rapporto tra
sistema e mondo
reale
Il principio è stato
applicato parzialmente
Chiede di inserire il metodo
di pagamento in
un’interazione precedente
alla durata del ticket
Richiedere i due input
nella stessa interazione
Controllo
dell’utente e
libertà
Il principio è stato
applicato correttamente
- Non esistono “percorsi
forzati”, è sempre
possibile tornare nella
pagina precedente
Consistenza e
standard
Il principio è stato
applicato parzialmente
Il pulsante rotatorio non è di
facile comprensione
Sostituirlo od integrarlo
con un sistema input
classico
28. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – VALUTAZIONE EURISTICA 26
Prevenzione
degli errori
Il principio non è stato
applicato
Non chiede conferma prima
di nessuna transazione
Aggiungere un popup che
richieda conferma prima
di una transazione
Riconoscimento
non ricordo
Il principio è stato
applicato parzialmente
Il pulsante rotatorio non è di
facile comprensione
Sostituirlo od integrarlo
con un sistema input
classico
Flessibilità ed
efficienza
Il principio è stato
applicato correttamente
- Un utente esperto può
aggiungere più di un
veicolo o metodo di
pagamento per
velocizzare i suoi acquisti
Estetica e design
minimalista
Il principio è stato
applicato correttamente
- -
Aiuto all’utente
nella gestione
degli errori
Il principio non è stato
applicato
Essendo ancora un
prototipo, non è stato
previsto
-
Documentazione Il principio non è stato
applicato
Essendo ancora un
prototipo, non sono stati
aggiunti aiuti o
suggerimenti per l’utente
-
6.2 Ricerca di un parcheggio
ID Principio Problema Soluzione
Visibilità dello
stato del sistema
Il principio è stato
applicato correttamente
- Il sistema risponde
velocemente, evitando
situazioni di stallo
Rapporto tra
sistema e mondo
reale
Il principio è stato
applicato correttamente
- -
29. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – VALUTAZIONE EURISTICA 27
Controllo
dell’utente e
libertà
Il principio è stato
applicato correttamente
- Non esistono “percorsi
forzati”, è sempre
possibile tornare nella
pagina precedente
Consistenza e
standard
Il principio è stato
applicato correttamente
- -
Prevenzione
degli errori
Il principio è stato
applicato correttamente
- Ogni casella di testo
richiede esplicitamente
cosa deve esserci
inserito
Riconoscimento
non ricordo
Il principio è stato
applicato correttamente
- Ogni operazione che
l’utente può svolgere è
univoca e intuitiva
Flessibilità ed
efficienza
Il principio non è stato
applicato
Non è presente un modo
per velocizzare il
completamento del task
-
Estetica e design
minimalista
Il principio è stato
applicato correttamente
- -
Aiuto all’utente
nella gestione
degli errori
Il principio non è stato
applicato
Essendo ancora un
prototipo, non è stato
previsto
-
Documentazione Il principio non è stato
applicato
Essendo ancora un
prototipo, non sono stati
aggiunti aiuti o
suggerimenti per l’utente
-
6.3 Previsione della disponibilità di parcheggio
Principio Problema Soluzione
Visibilità dello
stato del sistema
Il principio è stato
applicato correttamente
- Quando il sistema
richiede molto tempo
30. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – VALUTAZIONE EURISTICA 28
per rispondere, mostra
un’icona di caricamento
Rapporto tra
sistema e
mondo reale
Il principio è stato
applicato correttamente
- -
Controllo
dell’utente e
libertà
Il principio è stato
applicato correttamente
- Non esistono “percorsi
forzati”, è sempre
possibile tornare nella
pagina precedente
Consistenza e
standard
Il principio è stato
applicato correttamente
- -
Prevenzione
degli errori
Il principio è stato
applicato correttamente
- Ogni casella di testo
richiede esplicitamente
cosa deve esserci
inserito
Riconoscimento
non ricordo
Il principio è stato
applicato correttamente
- Ogni operazione che
l’utente può svolgere è
univoca e intuitiva
Flessibilità ed
efficienza
Il principio non è stato
applicato
Non è presente un modo
per velocizzare il
completamento del task
-
Estetica e design
minimalista
Il principio è stato
applicato correttamente
- -
Aiuto all’utente
nella gestione
degli errori
Il principio non è stato
applicato
Essendo ancora un
prototipo, non è stato
previsto
-
Documentazione Il principio non è stato
applicato
Essendo ancora un
prototipo, non sono stati
aggiunti aiuti o
suggerimenti per l’utente
-
31. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – SPECIFICHE DI USABILITA’ 29
7. Specifiche di usabilità
Scenario &
Subtasks
Worst case Planned Best case
Interaction
Scenario:
Mario cerca un
parcheggio
2 a usabilità, facilità
d’uso e soddisfazione
4 a usabilità, facilità
d’uso e soddisfazione
5 a usabilità, facilità
d’uso e soddisfazione
1. Clicca sul tab
“Dove vuoi andare”
4 secondi,1 errori e 2
a familiarità
2 secondi,0 errori e 4
a familiarità
1 secondi,0 errori e 5
a familiarità
2. Riempie il form
di ricerca e la avvia
40 secondi,4 errori e
2 a familiarità
20 secondi,1 errori e
4 a familiarità
10 secondi,0 errori e
5 a familiarità
3. Clicca sulla “P”
nella mappa
relativa al
parcheggio
“ChiaiaPark”
10 secondi,5 errori e
1 a familiarità
7 secondi,1 errori e 4
a familiarità
4 secondi,0 errori e 5
a familiarità
4. Avvia la
navigazione
5 secondi,2 errori e 2
a familiarità
3 secondi,0 errori e 4
a familiarità
2 secondi,0 errori e 5
a familiarità
5. Visualizza la lista
dei posti
liberi/occupati del
parcheggio
5 secondi,2 errori e 2
a familiarità
3 secondi,0 errori e 4
a familiarità
2 secondi,0 errori e 5
a familiarità
Per questo task, ci si aspetta che un utente con circa un’ora di esperienza nell’utilizzo dell’App riesca a
svolgerlo in circa 30 secondi con al più 2 errori. Per utenti meno esperti, l’utilizzo della mappa può far incorrere
in qualche errore in più.
Scenario &
Subtasks
Worst case Planned Best case
Interaction
Scenario:
Gianluca modifica
la durata del ticket
2 a usabilità, facilità
d’uso e soddisfazione
3 a usabilità, facilità
d’uso e soddisfazione
4 a usabilità, facilità
d’uso e soddisfazione
1. Clicca sul
pulsante dello
storico
10 secondi,5 errori e
1 a familiarità
4 secondi,1 errori e 3
a familiarità
2 secondi,0 errori e 5
a familiarità
2. Apre la
schermata per
modificare il ticket
3 secondi,1 errori e 3
a familiarità
2 secondi,0 errori e 4
a familiarità
1 secondi,0 errori e 5
a familiarità
3. Gira il pulsante
rotatorio per
modificare il tempo
10 secondi,4 errori e
1 a familiarità
5 secondi,1 errori e 3
a familiarità
3 secondi,0 errori e 4
a familiarità
4. Paga 3 secondi,1 errori e 4
a familiarità
2 secondi,0 errori e 5
a familiarità
1 secondi,0 errori e 5
a familiarità
Per questo task, ci si aspetta che un utente dopo 2/3 interazioni capisca il funzionamento del pulsante rotatorio
e riesca a completare l’operazione in meno di 15 secondi con al più 2 errori.
32. CORSO DI LAUREA MAGISTRALE IN INFORMATICA – UNIVERSITA’ DEGLI STUDI DI SALERNO
CORSO DI INTERAZIONE UOMO MACCHINA E USABILITA’ DEL SOFTWARE – A.A. 2021/2022
PROGETTO SMART PARK – TEAM 1
DOCUMENTO SUL DESIGN – SPECIFICHE DI USABILITA’ 30
Scenario &
Subtasks
Worst case Planned Best case
Interaction
Scenario:
Marco paga il
parcheggio
1 a usabilità, facilità
d’uso e soddisfazione
3 a usabilità, facilità
d’uso e soddisfazione
4 a usabilità, facilità
d’uso e soddisfazione
1. Clicca sul tab
“Paga parcheggio”
4 secondi,1 errori e 2
a familiarità
2 secondi,0 errori e 4
a familiarità
1 secondi,0 errori e 5
a familiarità
2. Inserisce i dati
relativi al
parcheggio, all’auto
e al metodo di
pagamento
40 secondi,8 errori e
2 a familiarità
15 secondi,1 errori e
4 a familiarità
12 secondi,1 errori e
5 a familiarità
3. Gira il pulsante
rotatorio per
impostare il tempo
10 secondi,4 errori e
1 a familiarità
5 secondi,1 errori e 3
a familiarità
3 secondi,0 errori e 4
a familiarità
4. Paga 3 secondi,1 errori e 4
a familiarità
2 secondi,0 errori e 5
a familiarità
1 secondi,0 errori e 5
a familiarità
Per questo task, ci si aspetta che l’utente, dopo circa 5 interazioni con il sistema, riesca a completarlo in 25
secondi o meno con al più 2 errori.