SlideShare a Scribd company logo
1 of 32
Download to read offline
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:
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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à
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
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
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
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.
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).
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.
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.
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
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
- -
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
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
-
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.
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.

More Related Content

Similar to Documento sul design - SmartPark

Introduzione sul Machine Learning
Introduzione sul Machine LearningIntroduzione sul Machine Learning
Introduzione sul Machine LearningLuca Naso
 
Presentazione forum pa challenge 1
Presentazione forum pa challenge 1Presentazione forum pa challenge 1
Presentazione forum pa challenge 1Carlo Sciuto
 
Presentazione forum pa challenge 1
Presentazione forum pa challenge 1Presentazione forum pa challenge 1
Presentazione forum pa challenge 1Carlo Sciuto
 
casi studio di Brambilla e Meduri (gruppoF)
casi studio di Brambilla e Meduri (gruppoF)casi studio di Brambilla e Meduri (gruppoF)
casi studio di Brambilla e Meduri (gruppoF)servizicollaborativi
 

Similar to Documento sul design - SmartPark (6)

Introduzione sul Machine Learning
Introduzione sul Machine LearningIntroduzione sul Machine Learning
Introduzione sul Machine Learning
 
Presentazione forum pa challenge 1
Presentazione forum pa challenge 1Presentazione forum pa challenge 1
Presentazione forum pa challenge 1
 
Presentazione forum pa challenge 1
Presentazione forum pa challenge 1Presentazione forum pa challenge 1
Presentazione forum pa challenge 1
 
casi studio di Brambilla e Meduri (gruppoF)
casi studio di Brambilla e Meduri (gruppoF)casi studio di Brambilla e Meduri (gruppoF)
casi studio di Brambilla e Meduri (gruppoF)
 
iParking
iParkingiParking
iParking
 
Verso la mobilita
Verso la mobilitaVerso la mobilita
Verso la mobilita
 

More from Gianmarco Beato

Acquisizione forense in ambito Web - Gianmarco Beato.pdf
Acquisizione forense in ambito Web - Gianmarco Beato.pdfAcquisizione forense in ambito Web - Gianmarco Beato.pdf
Acquisizione forense in ambito Web - Gianmarco Beato.pdfGianmarco Beato
 
La mia tesi di laurea triennale - Beato Gianmarco
La mia tesi di laurea triennale  - Beato GianmarcoLa mia tesi di laurea triennale  - Beato Gianmarco
La mia tesi di laurea triennale - Beato GianmarcoGianmarco Beato
 
La sicurezza nelle reti IEEE 802.15.4
La sicurezza nelle reti IEEE 802.15.4 La sicurezza nelle reti IEEE 802.15.4
La sicurezza nelle reti IEEE 802.15.4 Gianmarco Beato
 
Dispensa del corso di Cybersecurity
Dispensa del corso di CybersecurityDispensa del corso di Cybersecurity
Dispensa del corso di CybersecurityGianmarco Beato
 
Considerazioni di sicurezza per le reti IEEE 802.15.4
Considerazioni di sicurezza per le reti IEEE 802.15.4 Considerazioni di sicurezza per le reti IEEE 802.15.4
Considerazioni di sicurezza per le reti IEEE 802.15.4 Gianmarco Beato
 
Schema di watermarking robusto per un bitstream jpeg cifrato
Schema di watermarking robusto per un bitstream jpeg cifratoSchema di watermarking robusto per un bitstream jpeg cifrato
Schema di watermarking robusto per un bitstream jpeg cifratoGianmarco Beato
 
Web Application Coronavirus Regione Campania
Web Application Coronavirus Regione CampaniaWeb Application Coronavirus Regione Campania
Web Application Coronavirus Regione CampaniaGianmarco Beato
 
Presentazione Tesi di Laurea Triennale
Presentazione Tesi di Laurea Triennale Presentazione Tesi di Laurea Triennale
Presentazione Tesi di Laurea Triennale Gianmarco Beato
 

More from Gianmarco Beato (9)

Acquisizione forense in ambito Web - Gianmarco Beato.pdf
Acquisizione forense in ambito Web - Gianmarco Beato.pdfAcquisizione forense in ambito Web - Gianmarco Beato.pdf
Acquisizione forense in ambito Web - Gianmarco Beato.pdf
 
Pacman 2D con ML-Agents
Pacman 2D con ML-AgentsPacman 2D con ML-Agents
Pacman 2D con ML-Agents
 
La mia tesi di laurea triennale - Beato Gianmarco
La mia tesi di laurea triennale  - Beato GianmarcoLa mia tesi di laurea triennale  - Beato Gianmarco
La mia tesi di laurea triennale - Beato Gianmarco
 
La sicurezza nelle reti IEEE 802.15.4
La sicurezza nelle reti IEEE 802.15.4 La sicurezza nelle reti IEEE 802.15.4
La sicurezza nelle reti IEEE 802.15.4
 
Dispensa del corso di Cybersecurity
Dispensa del corso di CybersecurityDispensa del corso di Cybersecurity
Dispensa del corso di Cybersecurity
 
Considerazioni di sicurezza per le reti IEEE 802.15.4
Considerazioni di sicurezza per le reti IEEE 802.15.4 Considerazioni di sicurezza per le reti IEEE 802.15.4
Considerazioni di sicurezza per le reti IEEE 802.15.4
 
Schema di watermarking robusto per un bitstream jpeg cifrato
Schema di watermarking robusto per un bitstream jpeg cifratoSchema di watermarking robusto per un bitstream jpeg cifrato
Schema di watermarking robusto per un bitstream jpeg cifrato
 
Web Application Coronavirus Regione Campania
Web Application Coronavirus Regione CampaniaWeb Application Coronavirus Regione Campania
Web Application Coronavirus Regione Campania
 
Presentazione Tesi di Laurea Triennale
Presentazione Tesi di Laurea Triennale Presentazione Tesi di Laurea Triennale
Presentazione Tesi di Laurea Triennale
 

Documento sul design - SmartPark

  • 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.