Analisi dell'interfaccia grafica di tre navigatori esistenti (Garmin, Navigon e Google Nav) e progettazione di una nuova interfaccia

1. NAVIGATORE PER CICLISTI
L’interfaccia Grafica
Marco Simone Carisio– 755718
Stefano Manicone– 745361
Matteo Tizzoni– 760399

2. Analisi
competitor
generici Interfaccia
Progettazione
Iter di costruzione dell’interfaccia grafica

3. Analisi
competitor
Progett
Iter di costruzione dell’interfaccia grafica

4. Analisi Competitor

5. Analisi Competitor
Garmin offre un interfaccia molto
SEMPLICE ed INTUITIVA
sviluppata su DUE PIANI
primo
secondo

6. Analisi Competitor
IN PRIMO PIANO ci sono le FUNZIONI PRINCIPALI
DOVE SI VA?  Permette di accedere ad un’altra schermata in cui scegliere la
destinazione tramite: - INSERIMENTO DELL’INDIRIZZO
- PUNTO PREDEFINITO COME CASA
- PUNTO DI INTERESSE
- ULTIME DESTINAZIONI TROVATE
MAPPA  Visualizza istantaneamente la
PROPRIA POSIZIONE SULLA MAPPA

7. Analisi Competitor
in SECONDO PIANO ci sono le FUNZIONI di IMPOSTAZIONE
IMPOSTAZIONI  Visualizza
istantaneamente la PROPRIA POSIZIONE
SULLA MAPPA
VOLUME  Permette di REGOLARE IL VOLUME DELLA VOCE, DEI SUONI oppure
DISATTIVARLO, navigando solo a vista.

8. Analisi Competitor
Nella barra superiore, vi sono gli INDICATORI DI STATO
INDICATORE INDICATORE
DI SEGNALE LIVELLO BATTERIA
ORARIO

9. Analisi Competitor
Durante la navigazione, l’interfaccia assume ancora
una grafica estremamente SEMPLICE E INTUITIVA
DISTANZA ALLA INDICAZIONE DELLA
PROSSIMA SVOLTA PROSSIMA VIA
PROSSIMA SVOLTA
ZOOM
MAPPA
INFORMAZIONI
VELOCITA’ DI DI VIAGGIO
PERCORRENZA
ORARIO DI
ARRIVO

10. Analisi Competitor INFORMAZIONI
DI VIAGGIO
Tappando sulla barra delle impostazioni di viaggio è
possibile accedere al CRUSCOTTO DI NAVIGAZIONE, da cui
è possibile consultare i dettagli di viaggio.
DIREZIONE
VELOCITA’
MT. PERCORSI
DALL’INIZIO DEL
VIAGGIO
KM. TOTALI PERCORSI
VALORI TOTALI

11. Analisi Competitor INFORMAZIONI
DI VIAGGIO
Tappando sul pulsante menu si ritorna alla
SCHERMATA PRINCIPALE, sulla quale compaiono pulsanti
per tornare alla navigazione o terminarla.
STOP INSERISCI
DEVIAZIONI

12. Analisi Competitor
Durante le ore serali, l’interfaccia entra
automaticamente in modalità NOTTURNA, con sfondi
scuri per favorire la visibilità e non infastidire la guida.

13. Analisi Competitor

14. Tutta l’interfaccia è basata sulla possibilità immediata di raggiungere la
destinazione desiderata. Vi sono diversi modi di farlo:
Possibilità di scegliere il proprio
mezzo di spostamento: a piedi,
automobile
1. Comandi vocali per la
pronuncia veloce della destinazione
• Non richiede
concentrazione quindi non
distrae dalla guida
2. Digitazione a mano
della destinazione
3. Navigazione diretta
verso il punto indicato dall’utente
come abitazione
4. Navigazione diretta verso le
destinazioni recenti

15. Un altro modo di navigare e scegliere la destinazione ci è dato dalla possibilità
di muoverci all’interno del menù:
attraverso uno slide orizzontale possiamo passare
alla scheda “contatti” e alla scheda “speciali”.
1. Nel primo, abbiamo la possibilità di navigare verso gli
indirizzi associati ai nostri contatti in rubrica;
2. nella seconda, dopo aver impostato luoghi come
“preferiti”, è possibile selezionarli velocemente.

16. All’interno di quest’interfaccia, l’icona
cerchiata a nostro avviso è poco intuitiva e
poco attinente al contesto. Sarebbe meglio, a
livello di user experience, anche all’interno
del nostro navigatore, sostituirla con la
dicitura “dove sono”.
Tappando su questa voce si accede ad una
successiva schermata

17. Tappando su quest’icona si accede al
Menu Livelli
da cui è possibile visualizzare:
• Informazioni sul TRAFFICO in tempo reale
• Cambiare la visualizzazione della mappa
• Visualizzare PUNTI DI INTERESSE
• O ricercarne di nuovi su Google

18. La funzione di «Pronuncia Destinazione»
risulta essere sempre in primo piano!
Accedendo alle funzioni secondarie, la
mappa rimane sempre visualizzabile per
consentire di proseguire la navigazione.
Nel caso di acceda invece a impostazioni primarie,
che potrebbero modificare la destinazione, la
mappa viene coperta.
Premendo il pulsante Touch «Proprietà»
è possibile accedere ad un sottomenù
riassuntivo delle voci più importanti

19. Una volta impostata la destinazione viene
visualizzato automaticamente il
percorso più breve.
Questo pulsante permette di specificare
eventuali esclusioni (autostrade, pedaggi..)

20. Questo pulsante permette di visualizzare le
alternative di percorso
Questo pulsante mostra le
indicazioni testuali

21. Analisi Competitor

22. L’interfaccia si sviluppa su due
livelli che permettono di accedere alle
funzioni principali del navigatore
Possibilità di digitare l’indirizzo
Navigazione verso le
destinazioni recenti
Navigazione diretta
verso casa
Accesso diretto alla
mappa
Accesso alle Impostazioni
generali dell’applicazione

23. Attraverso uno slide verso sinistra è possibile accedere alle
altre funzioni del navigatore
Navigazione verso
punti di interesse
Possibilità di pianificare un tragitto
Coordinate della
posizione corrente
Servizio emergenze
Accesso all’Android Market per
acquistare servizi aggiuntivi

24. Tappando su ‘’Le mie destinazioni’’ nella schermata principale ci vengono
proposte le destinazioni recenti. Effettuando uno slide verso sinistra, è
possibile accedere alle destinazioni impostate come Favorite e alla
navigazione verso un contatto presente nella rubrica
Destinazioni Recenti
Navigazione verso
un contatto

25. Tappando sulla voce “Ricerca POI” si accede alla schermata
di navigazione verso un punto di interesse
Classica ricerca di un POI in una città o in
tutto il paese
Ricerca Poi vicino alla propria posizione
Accesso diretto ai POI più significativi nei
dintorni
Possibilità di ricercareun POI direttamente
attraverso il motore Google

26. Tappando sulla voce “Pianifica Tragitto” si accede alla schermata
che permette di organizzare un nuovo tragitto con più tappe
(destinazioni, POI, ecc..)
Possibilità di pianificare un tragitto da zero
Visualizzazione dei tragitti recenti
Possibilità di caricare un tragitto salvato

27. Posizione attuale con relative coordinate
GPS
Tappando sull’icona relativa al Servizio
Emergenze ci appare questa schermata
che ci indica la nostra posizione corrente
e ci permette di raggiungere la pompa di
benzina, la caserma di polizia, l’ospedale
o la farmacia più vicini

28. Dopo aver scelto la nostra destinazione ci appare questa schermata
riassuntiva con informazioni aggiuntive molto interessanti
L’interfaccia ci permette di tornare al menu
principale o di visualizzare la destinazione su
street view
Indicazioni live sul meteo relativo alla nostra
destinazione
Informazioni relative al traffico
Funzione che ci permette di visualizzare i POI
vicini alla nostra destinazione
Possibilità di scegliere tra navigazione a piedi o in
automobile

29. Prima di iniziare la navigazione vera e propria ci appare questa schermata che
ci permette di scegliere il nostro percorso tra tre soluzioni possibili
Icone che permettono all’utente di agire sulla
mappa tramite uno zoom in o zoom out
Navigon ci dà immediatamente la possiblità di
scegliere tra tre itinerari, indicandoci però
qual è quello più veloce

30. Una volta scelto l’itinerario si passa alla visualizzazione della
mappa dall’indirizzo di partenza
Questo pulsante permette
di cambiare le
informazioni relative
alla distanza da
percorrere e all’ora
di arrivo
Indicazione sulla
prossima svolta da
effettuare,
Tramite questa icona si
accede all’Android
Market per acquistare
servizi aggiuntivi

31. Tappando sul classico pulsante presente su ogni sistema Android relativo
alle opzioni, accediamo a questo sottomenu:
Visualizzazione di tutti i
POI sul tragitto che
stiamo percorrendo
con possibilità di iniziare
una nuova navigazione
verso uno di questi
Accesso alle
impostazioni generali
dell’applicazione

32. si Competitor Interfacci
Progettazione
Iter di costruzione dell’interfaccia grafica

33. Progettazione
Da una fase di analisi siamo passati ad una
seconda fase di "progettazione", in
cui abbiamo realizzato un primo prototipo di
interfaccia grafica che tenesse conto:
• delle nostre idee
• delle esigenze degli utenti
• dei problemi da essi sottolineati.
Nella realizzazione della nuova interfaccia abbiamo
inoltre:
1. tenuto conto dei punti di forza dei
dispositivi già esistenti per auto,
2. li abbiamo integrati con le funzioni tecniche
avanzate di quelli "bike"
3. infine abbiamo cercato di risolvere i problemi
e le anomalie che in essi avevamo
riscontrato.
Scopo di questa operazione è progettare un'interfaccia si innovativa, ma allo stesso
tempo anche completa, ergonomica e più performante delle precedenti… al fine di
creare un prodotto rivoluzionario e top di gamma nel suo settore.

34. Progettazione
Da questo minuzioso lavoro abbiamo prodotto questo primo wireframe:

35. Progettazione
Come possiamo facilmente notare, l'interfaccia è suddivisa in 3 macro aree:
BARRA DI RICERCA
MAPPA
DESTINAZIONI
RAPIDE

36. Progettazione
BARRA DI RICERCA
All'interno della barra di ricerca abbiamo pensato di conferire una maggiore
importanza ad un:
• form di ricerca rapida della destinazione, in cui immediatamente
l'utente può con un semplice tappa indicare la meta desiderata di iniziare la
navigazione.
• Sempre relativo all'inserimento della destinazione, abbiamo pensato di
implementare due pulsanti sul lato destro e su quello sinistro:
1. il primo, relativo alla centratura della mappa sulla posizione attuale,
permetterebbe immediatamente all'utente di capire dove si trova prima di
procedere ad inserire una destinazione.
2. Il secondo, sul lato destro, rappresentato con una icona di un microfono,
permetterebbe di inserire la destinazione in modo vocale: semplicemente
cioè con l'uso della voce, il ciclista avendo le mani impegnate, potrebbe
facilmente interagire con il dispositivo senza levare le mani dal manubrio.

37. Progettazione
L'area centrale, dedicata interamente alla mappa, rappresenta
certamente il fulcro della nostra interfaccia.
Abbiamo pensato che la possibilità di visualizzare la mappa
solo dopo aver impostato tutti i dati di navigazione, fosse un
limite per l'utente e una scelta poco ergonomica di
relazionarsi con esso nella maggior parte dei dispositivi.
Il fatto di concedere un così ampio spazio, direttamente
all'apertura dell'applicazione, consente secondo noi al ciclista
di capire immediatamente dove si trova, di vedere i luoghi
nelle vicinanze e di consultare i punti di interesse nelle
immediate vicinanze. La scelta di dedicare la quasi totalità
dello spazio a questa sezione, deriva logicamente anche dalla
necessità di poter vedere chiaramente la strada da
percorrere, tenendo conto che il dispositivo sarà situato circa
50 cm dal viso e, su una superficie soggetta a vibrazioni e
quindi a disturbi visivi.
Oltre ad una scelta di comodità quindi, questa rappresenta quindi, a nostro parere,
anche una soluzione di maggiore impatto sul grande pubblico.

38. Progettazione
La barra inferiore invece, è quella maggiormente dedicata
all'interazione rapida con l'utente.
In essa sono disposti cinque bottoni rappresentati dalle corrispettive
icone grafiche:
Casa: imposta automaticamente predefinito come casa; permettendo in
qualsiasi momento al ciclista di interrompere la propria navigazione e
trovare la strada più rapida per tornare alla propria abitazione.
recenti: apre un menu in sovrimpressione, permettendo di scegliere
immediatamente la le ultime destinazioni cercate, senza richiedere
l'inserimento di ulteriori informazioni da parte dell'utente.
Percorsi: sostituisce temporaneamente la visualizzazione della mappa
con una serie di percorsi ciclabili consigliati dal navigatore stesso o da altri.
In questa sezione sarà anche possibile visualizzare le piste ciclabili e il
percorso più rapido per raggiungerle.
POI: apre un menù in cui verranno mostrati al ciclista in ordine di
distanza, i punti di interesse più vicini tra cui: bar, ristoranti, agriturismi,
campeggi, ciclo officine, punti di sosta, punti panoramici, ecc…
Menù: permette all'utente di accedere a tutte le altre funzioni avanzate
dispositivo, o di impostare in maniera più tecnica e precisa le destinazioni.
DESTINAZIONI
RAPIDE

39. Interfaccia
gettazione
Iter di costruzione dell’interfaccia grafica

40. Interfaccia
Homepage
Interfaccia grafica della home page del nuovo navigatore

41. Interfaccia
Sono state mantenute tutte le idee esposte nella sezione precedente e, implementate in
modo tale da avere un’interfaccia: semplice, completa e immediata.
BARRA DI RICERCA
Homepage
MAPPA
DESTINAZIO
NI RAPIDE

42. Interfaccia
I colori e le icone sono stati utilizzati seguendo il criterio
dello user experience ("User experience (UX) is the way a
person feels about using a product, system or service" -
Wikipedia), cioè cercando di mettere in primo piano i bisogni
Homepage
dell'utente durante il dialogo con il dispositivo stesso:
• visualizzazione veloce e intuitiva degli elementi chiave
• focalizzazione sulla mappa
• esclusione di ciò che può distrarre (o non essenziale)
• icone intuitive senza necessità di ulteriori spiegazioni
insomma...lo stretto necessario

43. Interfaccia
Possibilità di pronunciare la destinazione
Digitazione testuale della destinazione
Centra sulla posizione attuale
Homepage
Pulsanti di interazione con la mappa: zoom in
e zoom out

44. Indirizzo della posizione corrente
Percorsi ciclabili consigliati nei dintorni
Homepage
Navigazione verso Punti di Interesse
Pulsante di accesso al menu
Navigazione verso le destinazioni recenti
Navigazione diretta verso casa

45. Interfaccia
Dopo aver realizzato la schermata principale, siamo passati a disegnare anche la parte
vera e propria riguardante la ‘’navigazione’’. Infatti, una volta scelto come
impostare la propria destinazione, viene avviata automaticamente la navigazione
partendo dalla nostra posizione corrente.
Modalità Navigazione

46. Interfaccia
INDICATORI
SPECIFICI
Modalità Navigazione
MAPPA
INDICATORI
RAPIDI
Abbiamo progettato anche questa parte di interfaccia tenendo conto delle informazioni che
secondo noi sono fondamentali all'utente quando si trova sulla propria bicicletta. Come si può
vedere dalle immagini, abbiamo scelto di mantenere il layout pressoché invariato,
mantenendo una sostanziale divisone in tre parti della schermata.

47. Interfaccia
INDICATORI
SPECIFICI
Nella parte superiore, che è stata raddoppiata in termini di dimensioni, abbiamo
deciso di mostrare ai nostri ciclisti le informazioni più significative; per questo
motivo la scelta dei colori è ricaduta sul nero per quanto riguarda le scritte e sul bianco
per quanto riguarda lo sfondo in maniera tale da rendere massima la visibilità
Modalità Navigazione
tramite il contrasto.
Come si può intuire, lo stile è per lo più minimale, senza troppe rese sceniche che
potrebbero in qualche modo distrarre dalla guida.
Le informazioni che abbiamo scelto di mostrare sono:
• Pendenza
• Altitudine
• Km Rimanenti
• Giri/min
Alle prime due voci abbiamo anche associato un'iconcina che ne facesse subito
percepire il significato.
Tramite il menu delle impostazioni abbiamo pensato di rendere possibile un'ulteriore
personalizzazione delle informazioni mostrate in modo da rendere l'interfaccia in
qualche modo flessibile e adattabile ad ogni tipo di esigenza.

48. Interfaccia
L'area centrale rimane quella più importante e quindi abbiamo deciso di
lasciare uno spazio piuttosto esteso per inserire la mappa del nostro navigatore.
Modalità Navigazione
Il ciclista deve sempre capire in che posizione si trova e soprattutto deve poter
visualizzare le prossime svolte per adattare la propria pedalata e quindi la propria velocità.

49. Interfaccia
L'ultima parte, quella inferiore, della nostra interfaccia abbiamo deciso di
dedicarla ai cosiddetti "indicatori rapidi", una serie di informazioni veloci
che sono immediatamente visibili a chi pedala grazie all'estrema essenzialità
che abbiamo deciso di conferirle: solamente una sottile striscia nera è stata
dedicata all'indirizzo completo della posizione corrente in quanto è risultata
Modalità Navigazione
un'informazione non così di rilievo.
Al di sotto di questa, invece, abbiamo suddiviso la schermata in tre macro
aree decidendo di mostrare:
• i Km percorsi (nella parte sinistra)
• la velocità espressa in Km/h (nella parte destra)
• il pulsante per accedere ad ulteriori impostazioni/opzioni nella parte
centrale.

50. Interfaccia
Abbiamo deciso inoltre di realizzare anche una particolare interfaccia che contenga
principalmente solamente le indicazioni stradali da seguire sottoforma di ‘’Frecce’’.
Modalità «Frecce»

51. Interfaccia
Il colore dello sfondo nella parte centrale cambia in base al momento della giornata
in cui sto utilizzando il navigatore:
• verde o rosso durante le ore diurne
• blu nelle ore notturne, colore percepito più nettamente al buio
Modalità «Frecce»

52. Interfaccia
Infine, abbiamo deciso di integrare nella nostra interfaccia, l'idea che alcuni nostri colleghi
stanno realizzando: la modalità «Solo Audio».
Si tratta di una modalità in cui il ciclista non necessita di guardare lo schermo del proprio
dispositivo per continuare la propria navigazione; dopo aver impostato l'indirizzo verso il
quale l'utente vuole navigare utilizzando i metodi di inserimento descritti precedentemente, il
dispositivo può essere riposto nella tasca dei pantaloni e del giubbino perchè,
attraverso un particolare "pulsante" viene attivata questa modalità che fornirà al ciclista le
informazioni sulle svolte attraverso la voce.
Modalità «Solo Audio»

53. Interfaccia
Modalità «Solo Audio»
Prova del lancio della modalità «Solo Audio» nella nostra interfaccia.

54. Interfaccia
Mentre lo schermo rimane in
standby, il telefono continua a
indicare vocalmente o tramite
auricolare le indicazioni.
Modalità «Solo Audio»

55. Interfaccia
Eventuali scelte richieste di interazione da parte
dall’applicazione avverranno tramite gestures.
Modalità «Solo Audio»