Laboratorio di Progettazione II

Documento di Design

Dario Contini, 705212

d.contini@campus.unimib.it

Paola Re, 720316

p.re1@campus.unimib.it

INDICE

Introduzione

1. Strategy

2. Scope

3. Structura

4. Skeleton

5. Surface

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.

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

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.

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à

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.

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

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

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.

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.

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.

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

Calcola percorso

Inserimento dati di

viaggio

La figura 2 mostra la

struttura della

sezione dedicata

all’inserimento dei

dati di viaggio.

 

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 la data e l’ora di Figura  3

Figura  2

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.

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.

Figura  4

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.

Linee e fermate

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,

Figura  5

Figura  6

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

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

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

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.

5) Surface

Aspetti generali

Colori

Figura  13

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

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  14  Esempio  di  pulsante

Figura  15  Esempio  di  Feedback

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

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ù

Linee e fermate

 

         

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Trova

Avvisi

Preferiti

Le icone sulla mappa sono riportate su sfondo arancione altrimenti potrebbero confondersi nella mappa