Laboratorio di Progettazione II
Documento di Design
Dario Contini, 705212
d.contini@campus.unimib.it
Paola Re, 720316 ...
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 ...
1) Strategy
Il Prodotto che si intende sviluppare prende il nome di NA.ATM, New Application for ATM.
L’ obiettivo è quel...
3) Structure
Site Map
Per dare un idea di come sarà strutturata la nuova applicazione in seguito è riportata la
sitemap...
L’applicazione è costituta da una home page, dalla quale si possono raggiungere le cinque
principali sezioni.
- calcola ...
leggere la breve descrizione del percorso e decidere la soluzione più adatta alle sue esigenze;
cliccandovi sopra potrà a...
Le schede autobus e tram: forniscono la possibilità di scegliere la linea d’interesse
dell’utente fra due elenchi: linee ...
Preferiti
Qui viene rappresentata la sezione
preferiti. Anche essa è suddivisa in due
schede:
In itinerari: vengono pr...
preferiti POI. Da queste schermate è possibile visualizzare il POI su mappa o aprire la sezione
naviga con l’indirizzo de...
Premere a lungo e trascinamento: Riorganizza i dati all'interno di una
sezione, o sposta i dati in un contenitore. Sarà u...
Scroll:Consente di spostarsi da verticalmente nella pagina.
Swipe: consente di spostarsi orizzontalmente nella
pagina
T...
Action bar
La barra delle azioni occuperà la parte superiore di ogni schermata dell’applicazione. In essa
compaiono il p...
Calcola percorso
Inserimento dati di
viaggio
La figura 2 mostra la
struttura della
sezione dedicata
all’inserimento ...
partenza o di arrivo. Di default l’applicazione imposta come data e ora quelle attuali.
Completati tutti i campi di ricer...
Nella parte superiore compare il pulsante “Visualizza
percorso su mappa”, che consentirà di visualizzare l’intero
percor...
della metropolitana e del treno. Le quattro sottosezioni saranno strutturate tutte nello stesso
modo e saranno selezionab...
Il resto della schermata è occupata dalla raffigurazione del percorso. Ogni fermata è
contraddistinta da un punto, e per ...
Mappe
La figura mostra come saranno strutturate le sezioni dedicate
alle mappe. L’Intera schermata sarà occupata dalla m...
Preferiti
La figura mostra come sarà
strutturata la sezione preferiti.
Anche in questo caso saranno
presenti nella par...
Selettori e
Pulsanti con testo
Action Bar e icone
identificative
Icone di interazione Sfondo e
testi sui
pulsanti
L...
Icone
Le icone sono quelle utilizzate convenzionalmente nelle applicazioni sviluppate per il sistema
operativo Android. ...
Aggiungi ai preferiti
Mappa
Font
Il font utilizzato nell’applicazione è Roboto, font consigliato nelle linee guida di A...
Linee e fermate
Trova
Avvisi
Preferiti
Le icone sulla mappa
sono riportate su sfondo
arancione altrimenti
potrebbero confondersi
nella map...
of 26

Na.atm docdidesign

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
Published on: Mar 3, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Na.atm docdidesign

  • 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

Related Documents