Documento di design. Riprogettazione dell’interfaccia dell’applicazione ufficiale di Atm, “ATMobile”, con relativi test di usabilità. L’obiettivo principale è quello di migliorare l’interazione uomo-applicazione in modo da renderne più intuitivo l’utilizzo e facilitare la ricerca delle informazioni

1. Laboratorio di Progettazione II
Documento di Design
Dario Contini, 705212
d.contini@campus.unimib.it
Paola Re, 720316
p.re1@campus.unimib.it

2. INDICE
Introduzione
1. Strategy
2. Scope
3. Structura
4. Skeleton
5. Surface

3. Introduzione
Il presente documento vuole mostrale le scelte di design relative al progetto NA.ATM. La nuova
interfaccia vuole andare a risolvere i problemi di usabilità presenti nell’attuale versione
dell’applicazione. ATM Mobile attualmente presenta numerose problematiche per quanto
riguarda l’interazione uomo macchina, a causa di un interfaccia poco chiara. L’analisi
dettagliata dell’attuale interfaccia è riportata nel documento dei requisiti.
Nei seguenti capitoli verranno presentate la soluzioni adottate per risolvere i problemi di
usabilità. Sarà presentata la nuova struttura, i mockup e il prototipo dell’interfaccia.

4. 1) Strategy
Il Prodotto che si intende sviluppare prende il nome di NA.ATM, New Application for ATM.
L’ obiettivo è quello di realizzare una nuova interfaccia dell’applicazione ufficiale di ATM per i
dispositivi aventi sistema operativo Android. L’attuale applicazione riporta diversi problemi
relativi all’usabilità che la portano ad essere soggetta a valutazioni negative da parte degli
utenti, i quali sono indotti a ricercare applicazioni sostitutive.
Fornire un’interfaccia usabile aiuterà l’utente a reperire tutte le informazioni necessarie agli in
modo facile ed intuitivo.
Lo sviluppo di una nuova interfaccia porterà dei benefici sia agli utenti che all’azienda stessa.
Gli utenti potranno disporre di un valido strumento che li aiuti a muoversi all’interno della città
di Milano sfruttando al meglio i mezzi pubblici, in base alle proprie esigenze. Al tempo stesso
ATM ne trarrà dei benefici in termini di immagine, lo sviluppo di un’ applicazione migliore e
funzionante potrebbe migliorare la visione generale dell’azienda.
Altre informazioni riguardo la strategia sono reperibili nel documento delle specifiche dei
requisiti e pianificazione dei test di usabilità.
2) Scope
Informazioni riguardo lo scope sono reperibili nel documento delle specifiche dei requisiti e
pianificazione dei test di usabilità.

5. 3) Structure
Site Map
Per dare un idea di come sarà strutturata la nuova applicazione in seguito è riportata la
sitemap.
Facendo riferimento a frammenti della sitemap verranno descritti i concetti fondamentali utili
alla lettera della stessa.

6. L’applicazione è costituta da una home page, dalla quale si possono raggiungere le cinque
principali sezioni.
- calcola percorso
- linee e fermate
- trova
- avvisi
- preferiti
Per Home intendiamo la vista iniziale che ci apparirà ogni qual volta che
apriremo la nostra app.
In questo frammento analizziamo la sezione calcola percorso.
L’esito della navigazione dipende da 2 condizioni:
Cond.1 – Esiste uno o più di un risultato per la ricerca effettuata?
Cond. 2 - L’indirizzo inserito è corretto?
Calcola il percorso: consente all’utente di
impostare un percorso verso una destinazione a
scelta, partendo dalla posizione attuale o
specificando un indirizzo. In questa sezione, oltre
agli indirizzi, possono essere impostati: l’orario di
partenza o di arrivo, i mezzi che si desiderano
utilizzare e la distanza massima che si vuole
percorrere a piedi. Una volta impostato il percorso
in modo corretto l’utente verrà indirizzato alla
pagina con le soluzione proposte dal sistema.
Se l’utente non inserisce i dati richiesti
correttamente il sistema fornisce un messaggio di
errore e l’utente dovrà procedere ad un nuovo
inserimento dei dati.
NA.ATM può, direttamente, fornire un’
unica descrizione del percorso oppure, in caso
di più soluzioni disponibili l’utente dovrà fare una
selezione del percorso: in questa pagina
vengono presentate le possibili soluzioni per
raggiungere la destinazione scelta. L’utente potrà

7. leggere la breve descrizione del percorso e decidere la soluzione più adatta alle sue esigenze;
cliccandovi sopra potrà accedere alla sezione successiva.
N.B. In caso di più soluzioni disponibili esse non sono mutuamente esclusive.
Descrizione del percorso: in questa sezione l’utente potrà visualizzare l’intero percorso, con
i tempi d’attesa dei mezzi ed eventuali avvisi che riguardano la linea interessata, inoltre potrà
visualizzare la mappa del intero percorso o di un singolo tratto.
Mappa del percorso: in questa sezione viene visualizzato l’intero percorso su mappa.
Mappa del singolo tratto: in questa sezione l’utente può visualizzare la mappa di
una singola tratta (a piedi o con mezzo di trasporto) del percorso proposto.
Dalla mappa, con un tap su un pin, si potrà accedere alla scheda di una fermata (descritta
successivamente).
Linee e fermate
Linee e fermate consente all’utente di visualizzare l’intero percorso delle linee del trasporto
pubblico milanese.
In questa pagina possiamo navigare in quattro schede diverse: autobus, tram, metro e
suburbane.

8. Le schede autobus e tram: forniscono la possibilità di scegliere la linea d’interesse
dell’utente fra due elenchi: linee urbane e linee interubane.
Le schede metro e suburbane: forniscono un unico elenco di linee.
Una volta selezionata la linea appare l’elenco di tutte le fermate su quella linea.
Dalla schermata linea possiamo accedere alle pagine di ogni singola fermata (questa parte
viene descritta successivamente
Trova
In questo frammento l’esito della
navigazione dipende da 1 condizione:
Cond. 1 - L’indirizzo inserito è corretto?
Nella sezione trova possiamo effettuare
una ricerca per diverse categorie di punti
di interesse. I risultati forniti saranno in
ordine per distanza, partendo dal punto
attuale in cui si trova l’utente o da un
indirizzo fornito da esso. Se l’utente non
inserisce i dati richiesti correttamente il
sistema fornisce un messaggio di errore e
l’utente dovrà procedere ad un nuovo
inserimento dei dati.
I risultati di questa ricerca sono
presentati nella vista elenco POI, da qui
l’utente potrà decidere se visualizzare la
mappa di tutti i POI, oppure accedere
alla scheda di uno di esso (le schede
verranno analizzate successivamente).
Avvisi
La sezione avvisi è suddivisa in due schede:
In @ATM: vengono indicati gli ultimi tweet di ATM
In Info Traffico: vengono indicati gli avvisi più
complessi di ATM

9. Preferiti
Qui viene rappresentata la sezione
preferiti. Anche essa è suddivisa in due
schede:
In itinerari: vengono presentati gli
itinerari preferiti scelti dall’utente. Da
questa scheda si potrà accedere alla
descrizione dell’itinerario.
In POI: vengono elencati i POI preferiti
scelti dall’utente. Da questa scheda si
potrà accedere alle scheda dei POI
(descritte successivamente).
Schede POI
Qui viene rappresentato come si possono raggiungere le schede dei punti di interesse.
Alle scheda parcheggio, scheda rivendita, scheda guidami, scheda bikemi, scheda
ATM Point e scheda fermata l’utente può arrivarci dalla pagina elenco POI e dalla pagina dei

10. preferiti POI. Da queste schermate è possibile visualizzare il POI su mappa o aprire la sezione
naviga con l’indirizzo del POI già caricato su “a”.
Inoltre alla scheda di una fermata l’utente può arrivarci dalla schermata di una linea o dalla
mappa di un percorso. Dalla scheda di una fermata possiamo, se presente, accedere ad una
linea o visualizzare l’orario (possibile anche scaricarlo in pdf).
4) Skeleton
Verranno presentati di seguito i mockup relativi alla nuova interfaccia di ATM Mobile. I mockup
sono stati realizzati utilizzando Balsamiq.
L’interfaccia è stata realizzata rispettando gli standard per le applicaizoni Android.
Il sistema operativo Android è installato su device di vario genere. L' applicazione si rivolge
solamente a smathphone, ma sul mercato sono presenti dispositivi con display delle più
svariate dimensioni, quindi, abbiamo cercato di eleborare soluzioni in grado di adattarsi sia a
dispositvi con display moto piccoli sia a quelli con schermi molto grandi. Vediamo prima alcuni
elementi comuni a tutte le pagine dell’applicazione.
Gestualità
Android mette a disposizione degli utenti una sere di gesti che consentono una migliore
interazione con il dispositivo. Ognuno di questi movimenti è collegato ad un preciso effetto.
L’utente, nel momento in cui effettuerà un determinato gesto, si aspetterà di ricevere una
determinata risposta. NA.ATM dovrà quindi tener conto di queste gestualità, ormai
convenzionali per gli utilizzatori di Android, in modo da non confondere gli utenti e rendere più
semplice il suo utilizzo.
NA.ATM prenderà in considerazione le seguenti gestualità:
Toccare: Attiva funzionalità predefinite. È il gesto più utilizzato per
interagire con l’applicazione, viene utilizzato per selezionare voci,
premere pulsanti e selezionare caselle di testo.

11. Premere a lungo e trascinamento: Riorganizza i dati all'interno di una
sezione, o sposta i dati in un contenitore. Sarà utilizzato nella sezione
“Preferiti” per riordinare a piacimento la lista.
Pinch aperto: Consente di ingrandire un contenuto. Sara utilizzato
nelle sezioni contenenti una mappa, per poter visualizzare meglio i
dettagli
Pinch vicino: Consente di ridurre i contenuti. Sarà utilizzato nelle
sezioni dedicate alle mappe per poterle rimpicciolire e visualizzare
un maggior numero di contenuti.

12. Scroll:Consente di spostarsi da verticalmente nella pagina.
Swipe: consente di spostarsi orizzontalmente nella
pagina
Tornale alla pagina/sezione precedente
Il sistema operativo Android mette a disposizione due modi per consentire agli utenti di
tornare alla sezione precedente: il pulsante indietro, presente su tutti i dispositivi che montano
il suddetto sistema operativo e il pulsante “Up”, presente nelle applicazioni.
Il pulsante indietro segue l’ordine cronologico in cui sono state visualizzate le pagine, l’utente
potrà quindi tornare alla pagina visualizzata precedentemente anche se appartenente ad
un'altra applicazione e potrà servire anche per uscire dall’app. il tasto indietro inoltre consente
di chiudere finestre di dialogo e pop up.
Il pulsante “Up” non segue l’ordine cronologico ma si basa unicamente su relazioni gerarchiche
delle schermate.

13. Action bar
La barra delle azioni occuperà la parte superiore di ogni schermata dell’applicazione. In essa
compaiono il pulsante “Up” descritto precedentemente e il pulsante Home. In alcuni casi
entrambi i pulsanti rimandano alla stessa pagina, ma è stato deciso di mantenerli entrambi per
rendere più coerenti tra loro le pagine e per consentire agli utenti di utilizzare il pulsante a cui
sono più abituati.
Mockup
Home page
La figura 1 rappresenta mostra come sarà strutturata
l’Home page della nuova versione di ATM Mobile.
Nella parte superiore è presente, come di consueto,
l’action bar, nella quale troviamo solamente, sulla
sinistra, il logo dell’azienda. In questa sezione
non vengono inseriti ne il pulsante “Up” ne quello per
tornare alla home page.
Sotto all’action bar, verra riportata un immagine
rappresentativa dell’azienda. La scelta di inserire un
immagine è dovuta principalmente a motivi estetici.
Il resto della schermata è occupato dai cinque pulsanti
che consentiranno di accedere alla funzioni principali
dell’applicazione. Traviamo quindi, in ordine, il pulsante
“Naviga”, il pulsante “Linee e fermate” il pulsante
“Trova”, il pulsante “Avvisi” ed infine il pulsante
“Preferiti”. I pulsanti hanno una dimensione sufficiente
a consentire una facile interazione con l’applicazione
tramite l’utilizzo del touch screen anche sui dispositivi
più piccoli. Ogni pulsante è costituito, oltre che dalla
scritta, anche da un icona rappresentativa della
funzione.
Figura
1

14. Calcola percorso
Inserimento dati di
viaggio
La figura 2 mostra la
struttura della
sezione dedicata
all’inserimento dei
dati di viaggio.
Figura
2
Nella parte centrale si trovano gli appositi campi per l’inserimento dell’indirizzo di partenza e di
arrivo. L’applicazione fornirà di default “posizione attuale” come indirizzo di partenza per
rendere più agevole la ricerca dato che l’applicazione viene spesso utilizzata in movimento, e
non sempre l’utente conosce l’indirizzo esatto della sua posizione.
L’utente può inserire l’indirizzo tramite la tastiera che
comparirà nel momento in cui tocchera il text field (figura 3) ,
come viene mostrato nella figura 3. Durante l’inserimento del
testo compariranno alcuni suggerimenti di ricerca in modo da
rendere più veloce l’inserimento dell’indirizzo.
Nel caso in cui l’utente si rende conto di aver sbagliato
indirizzo potrà cancellare i dati inseriti e immetterne di nuovi.
Di fianco ai box di testo sono presenti due icone. La prima,
posizionata più in altro, consente di invertire gli indirizzi di
partenza e di arrivo. La seconda icona consente di accedere
alle impostazioni. Nella sezione dedicata alle impostazioni
l’utente può scegliere quali mezzi utilizzare. Di default vengono
selezionati tutti i mezzi in modo da fornire all’utente tutte le
possibili soluzioni per raggiungere la destinazione.
Oltre agli indirizzi l’utente potrà selezionare la data e l’orario di
partenza. Toccando la barra di testo compariranno dei pickers
che consentiranno di selezionare Figura
3 la data e l’ora di

15. partenza o di arrivo. Di default l’applicazione imposta come data e ora quelle attuali.
Completati tutti i campi di ricerca l’utente potrà cliccare sul pulsante cerca posizionato nella
parte inferiore delle schermata.
Selezione del percorso pianificato
L’applicazione, tenendo in considerazione le
impostazioni inserite dall’utente restituisce, quando
possibile diverse soluzione per raggiungere la meta
desiderata, combinando linee differenti. Nella parte
superiore, appena sotto l’action bar vengono
riportare gli indirizzi di partenza e di arrivo, di fianco
compere l’icona a forma di stella che consentirà
all’utente di aggiungere il percorso nella sezione
preferiti. È stata scelta l’icona a stella perché è ormai
entrata nell’immaginario comune.
Sotto vengono riportate le soluzioni dalla più veloce
alla più lenta. Per ogni soluzione vengono riportati il
tempo impiegato per raggiungere la destinazione, i
km da percorrere a piedi e i mezzi che l’utente dovrà
prendere. Cliccando su un punto qualunque della
sezione l’utente passerà alla schermata successiva
riportante il percorso nel dettaglio.
Figura
4
Descrizione dettagliata del percorso
In questa sezione viene descritto nel dettaglio tutto il tragitto. Per rendere al meglio l’idea di
percorso le varie tappe vengono rappresentate come cerchi su una linea accompagnati
dall’icona del mezzo che dovrà essere utilizzato. Sotto le icone raffiguranti autotobus e tram
sono riportati i tempi d’attesa. I tempi d’attesa potranno essere aggiornati toccando l’icona
“aggiorna” presente nell’action bar. Per ogni tappa vengono riportate le azioni che l’utente
dovrà compiere.

16. Nella parte superiore compare il pulsante “Visualizza
percorso su mappa”, che consentirà di visualizzare l’intero
percorso sulla cartina, per consentire agli utenti di avere
due modalità di visualizzazione e scegliere quella che per
loro risulta essere più chiara e comprensibile.
Di fianco alla descrizione di ogni tappa compare l’icona
raffigurante una mappa. Cliccando su essa l’utente potrà
visualizzare su mappa il singolo tratto di percorso. Oltre
all’icona della mappa di fianco ai tratti di percorso
interessati da un mezzo potrà comparire un icona ad
indicare che è presente un avviso che interessa quella
linea. Toccando l’icona l’utente potrà visualizzare l’avviso.
Figura
5
Linee e fermate
Figura
6
La figura mostra come sarà composta la sezione “Linee e Fermate”. Questa sezione sarà a sua
volta suddivisa in quattro sottosezioni dedicata alla ricerca delle linee del autobus, del tram,

17. della metropolitana e del treno. Le quattro sottosezioni saranno strutturate tutte nello stesso
modo e saranno selezionabili tramite i tabs presenti nella parte superiore della schermata.
Nelle applicazioni android i tabs vengono utilizzati comunemente per muoversi tra diverse
sottosezioni o funzioni di una applicazione. Nel nostro caso specifico si tratterà di uno
scrollable tabs. questo genere di tabs offre la possibilità di contenere un gran numero di item.
Gli utenti per poter visualizzare tutti i tabs dovranno swippare verso destra e verso sinistra.
La parte centrale della schermata sono presenti delle caselle per la selezione della linee. Sono
state divise le linee urbane dalle linee interurbane per rendere più agevole e veloce la ricerca
tra le molte linee presenti, ovviamente solo nelle sottosezioni in cui sono presenti entrambi i
casi (autobus e tram). Toccando la casella di testo l’utente potrà selezionare la linea desiderata
da una lista.
La parte inferiore della schermata è occupata dal pulsante “cerca”.
Descrizione delle linee
La figura rappresenta la descrizione dettagliata della linea. La struttura viene ripresa in egual
modo nella rappresentazione delle linee autobus, tram, metropolitane e suburbane.
Nella parte superiore troviamo una sezione che riassume le informazioni principali della linea;
numero, stazione di partenza e di arrivo. Nella stessa sezione, sulla destra, si trovano i
pulsanti per la visualizzazione di eventuali avvisi riguardati la linea e il tasto per la
visualizzazione dell’intero percorso su mappa.
Figura
7

18. Il resto della schermata è occupata dalla raffigurazione del percorso. Ogni fermata è
contraddistinta da un punto, e per ognuna di esse vengono riportati il nome e le eventuali
coincidenze. L’utente potrà visualizzare l’intera linea scrollando verso il basso e verso l’alto.
Trova
La figura rappresenta la struttura della sezione “Trova”. Nella
parte superiore sarà presente una casella dedicata
all’inserimento dell’indirizzo attorno al quale l’applicazione
andrà a ricercare i POI. Di default l’applicazione inserirà la
dicitura “intorno a me”, ma toccando la sezione l’utente potrà
digitare l’indirizzo desiderato. Per selezionare i POI desiderati
l’utente dovrà accendere e spegnere gli switches desiderati. La
parte inferiore della schermata è occupata dal tasto “cerca”.
Risultati trova
La figura mostra come saranno visualizzati i risultati restituiti
dall’applicazione dopo la ricerca nella sezione trova. Nella parte
superiore della schermata è presente un pulsante che consentirà
di visualizzare tutti i punti d’interesse sulla mappa. Il resto della
schermata è occupata dai risultati. La tipologia del POI è si
identifica grazie all’icona rappresentativa della categoria (Fermata,
rivendita, AtmPoint etc..). Dopo l’icona sono riportati il nome del
POI e la distanza dall’indirizzo inserito. L’applicazione restituirà
risultati compresi nel raggio di un Km, nel caso non saranno
presenti risultati verrà restituito un messaggio di avviso.
Figura
8
Figura
9
Figura
10

19. Mappe
La figura mostra come saranno strutturate le sezioni dedicate
alle mappe. L’Intera schermata sarà occupata dalla mappa
riportante il percorso della linea o i punti d’interesse. Quando
l’utente vorrà visualizzare un unico punto o una fermata sulla
mappa essa si aprirà zoommata in quel punto. In basso a destra
sono presenti i pulsanti per la geolocalizzazione e per ingrandire
e rimpicciolire la mappa. Toccando i vari punti o le fermate sulla
mappa l’utente potrà visualizzare altre informazioni essenziali.
Avvisi
La sezione avvisi presenta nella parte
superiore due Tab che consentono di
visualizzare la sottosezione dedicata ai
Tweet presi da @ATM_Informa o la
sottosezione dedicata alle Infotraffico
ufficali prese dal sito dell’azienda. In
entrambe le sezioni l’utente potra
scrollare per visualizzare tutti gli
avvisi. Il numero di tweet sarà limitato
ad una determianta fascia oraria.
Figura
11
Figura
12

20. Preferiti
La figura mostra come sarà
strutturata la sezione preferiti.
Anche in questo caso saranno
presenti nella parte superiore due
Tabs che consentiranno di
visualizzare la sottosezione dedicata
punti di interesse o agli itinerari
salvati nei preferiti. La stellina
presente di fianco al nome di ogni
elemento consentirà all’utente di
eliminarlo dai preferiti.
Figura
13
5) Surface
Aspetti generali
Colori

21. Selettori e
Pulsanti con testo
Action Bar e icone
identificative
Icone di interazione Sfondo e
testi sui
pulsanti
La scelta è caduta su questi colori per due principali motivi.
Il colore primario è l’arancione poichè è fortemente identificativo dell’azienda. Questa tonalità
è presente sia nel logo sia in tutte le schermate del sito. Inoltre l’applicazione iATM,
applicazione ufficiale di ATM sviluppata per i dispositivi con sistema operativo iOS, utilizza
tutte queste tonalità. Per mantenere una certa coerenza tra le applicazioni tra le due diverse
applicazioni della stessa azienda si è deciso di puntare su questi toni.
I colori vengono utilizzati per distinguere i diversi elementi grafici, pulsanti icone interattive e
non etc...
Pulsanti
Sono presenti due tipologie di pulsanti.
I pulsanti costituiti da un icona di colore grigio e quelli riportati un testo
Figura
14
Esempio
di
pulsante
Le icone vengono utilizzate quando la sola immagine è in grado di richiamare la funzionalità
collegata. I pulsanti di testo vengono utilizzati quando è necessario attirare maggiormente
l’attenzione dell’utente soprattutto quando il pulsante è fondamentale per raggiungere un
obiettivo.
I pulsanti con testo sono rappresentati da un semplice rettangolo, oggi non vengono più
utilizzati effetti visivi (es effetto rilievo) per suggerire all’utente la possibilità di interagire col
tasto. Risultano invece importanti i feedback, che consentono all’utente di capire che la sua
azione è andata a buon fine.
Figura
15
Esempio
di
Feedback

22. Icone
Le icone sono quelle utilizzate convenzionalmente nelle applicazioni sviluppate per il sistema
operativo Android. Le icone devono essere facilmente riconoscibili e adatte a rappresentare
chiaramente a rappresentare chiaramente un elemento o una sezione.
Icone utilizate:
Icona
Significato
Autobus
Tram
Metropolitana
Treno
Tempi d’attesa
Download
Inverti
Preferito
Aggiorna
Up
Orari

23. Aggiungi ai preferiti
Mappa
Font
Il font utilizzato nell’applicazione è Roboto, font consigliato nelle linee guida di Android. Questo
font ha una buona leggibilità e un’ottima spaziatura che lo rende adatto anche a schermi di
dimensioni ridotte.
Hi-fi wireframe and description
Di seguito sono riportate le rappresentazioni altamente fedele, realizzate con photoshop, di
quello che sarà una vista dell’app.
Di seguito presentiamo la vista della Home, schermata iniziale per tutte le operazioni
effettuabili con NA.ATM, seguita dalle altre schermate dell’applicazione.
Home Page
L’Home page riprende la struttura già descritta nei
mockup. L’immagine riportata nella parte alta
dell’applicazione è stata ripesa dal sito web di ATM.
Nella parte centrale i cinque pulsanti sono ben visibili e
sono identificati, da scritta e icona. Abbiamo voluto
differenziare fortemente le diverse funzioni
dell’applicazione, a differenza di quanto avviene
nell’app attualmente esistenteù

24. Linee e fermate

25. Trova

26. Avvisi
Preferiti
Le icone sulla mappa
sono riportate su sfondo
arancione altrimenti
potrebbero confondersi
nella mappa