NAVIGATORE PER CICLISTI

L’interfaccia Grafica

Marco Simone Carisio– 755718 Stefano Manicone– 745361

Matteo Tizzoni– 760399

Analisi competitor

generici

Progettazione

Interfaccia

Iter di costruzione dell’interfaccia grafica

Analisi competitor

Progettazione

Interfaccia

Iter di costruzione dell’interfaccia grafica

Analisi Competitor

Garmin offre un interfaccia molto

SEMPLICE ed INTUITIVA

sviluppata su DUE PIANI

primo

secondo

Analisi Competitor

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

IN PRIMO PIANO ci sono le FUNZIONI PRINCIPALI

MAPPA Visualizza istantaneamente la PROPRIA POSIZIONE SULLA MAPPA

Analisi Competitor

VOLUME Permette di REGOLARE IL VOLUME DELLA VOCE, DEI SUONI oppure DISATTIVARLO, navigando solo a vista.

in SECONDO PIANO ci sono le FUNZIONI di IMPOSTAZIONE

IMPOSTAZIONI Visualizza istantaneamente la PROPRIA POSIZIONE SULLA MAPPA

Analisi Competitor

Nella barra superiore, vi sono gli INDICATORI DI STATO

INDICATORE DI SEGNALE

INDICATORE LIVELLO BATTERIA

ORARIO

Analisi Competitor

Durante la navigazione, l’interfaccia assume ancora una grafica estremamente SEMPLICE E INTUITIVA

VELOCITA’ DI PERCORRENZA

DISTANZA ALLA PROSSIMA SVOLTA

ORARIO DI ARRIVO

INDICAZIONE DELLA PROSSIMA VIA

MAPPA

PROSSIMA SVOLTA

INFORMAZIONI DI VIAGGIO

ZOOM

Analisi Competitor

Tappando sulla barra delle impostazioni di viaggio è possibile accedere al CRUSCOTTO DI NAVIGAZIONE, da cui

è possibile consultare i dettagli di viaggio.

MT. PERCORSI DALL’INIZIO DEL VIAGGIO

DIREZIONE

VALORI TOTALI

VELOCITA’

INFORMAZIONI DI VIAGGIO

KM. TOTALI PERCORSI

Analisi Competitor

Tappando sul pulsante menu si ritorna alla SCHERMATA PRINCIPALE, sulla quale compaiono pulsanti

per tornare alla navigazione o terminarla.

STOP INSERISCI DEVIAZIONI

INFORMAZIONI DI VIAGGIO

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.

Analisi Competitor

Analisi Competitor

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

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

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.

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

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

Premendo il pulsante Touch «Proprietà» è possibile accedere ad un sottomenù riassuntivo delle voci più importanti

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.

Una volta impostata la destinazione viene

visualizzato automaticamente il percorso più breve.

Questo pulsante permette di specificare eventuali esclusioni (autostrade, pedaggi..)

Questo pulsante permette di visualizzare le alternative di percorso

Questo pulsante mostra le

indicazioni testuali

Analisi Competitor

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

Navigazione verso

punti di interesse

Possibilità di pianificare un tragitto

Coordinate della

posizione corrente

Servizio emergenze

Attraverso uno slide verso sinistra è possibile accedere alle altre funzioni del navigatore

Accesso all’Android Market per

acquistare servizi aggiuntivi

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

Ricerca Poi vicino alla propria posizione

Tappando sulla voce “Ricerca POI” si accede alla schermata di navigazione verso un punto di interesse

Accesso diretto ai POI più significativi nei dintorni

Classica ricerca di un POI in una città o in tutto il paese

Possibilità di ricercare un POI direttamente

attraverso il motore Google

Possibilità di pianificare un tragitto da zero

Visualizzazione dei tragitti recenti

Possibilità di caricare un tragitto salvato

Tappando sulla voce “Pianifica Tragitto” si accede alla schermata che permette di organizzare un nuovo tragitto con più tappe (destinazioni, POI, ecc..)

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

Posizione attuale con relative coordinate GPS

Possibilità di scegliere tra navigazione a piedi o in automobile

L’interfaccia ci permette di tornare al menu principale o di visualizzare la destinazione su street view

Dopo aver scelto la nostra destinazione ci appare questa schermata

riassuntiva con informazioni aggiuntive molto interessanti

Indicazioni live sul meteo relativo alla nostra

destinazione

Funzione che ci permette di visualizzare i POI vicini alla nostra destinazione

Informazioni relative al traffico

Navigon ci dà immediatamente la possiblità di

scegliere tra tre itinerari, indicandoci però

qual è quello più veloce

Icone che permettono all’utente di agire sulla

mappa tramite uno zoom in o zoom out

Prima di iniziare la navigazione vera e propria ci appare questa schermata che

ci permette di scegliere il nostro percorso tra tre soluzioni possibili

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

Tappando sul classico pulsante presente su ogni sistema Android relativo

alle opzioni, accediamo a questo sottomenu:

Accesso alle

impostazioni generali dell’applicazione

Visualizzazione di tutti i

POI sul tragitto che stiamo percorrendo con possibilità di iniziare una nuova navigazione verso uno di questi

Analisi Competitor

Progettazione

Interfaccia

Iter di costruzione dell’interfaccia grafica

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.

Progettazione

Da questo minuzioso lavoro abbiamo prodotto questo primo wireframe:

MAPPA

BARRA DI RICERCA

DESTINAZIONI RAPIDE

Progettazione

Come possiamo facilmente notare, l'interfaccia è suddivisa in 3 macro aree:

Progettazione

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.

BARRA DI RICERCA

Progettazione

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.

L'area centrale, dedicata interamente alla mappa, rappresenta

certamente il fulcro della nostra interfaccia.

Oltre ad una scelta di comodità quindi, questa rappresenta quindi, a nostro parere,

anche una soluzione di maggiore impatto sul grande pubblico.

Progettazione

La barra inferiore invece, è quella maggiormente dedicata all'interazione rapida con l'utente.

DESTINAZIONI RAPIDE

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.

Analisi Competitor

Progettazione

Interfaccia

Iter di costruzione dell’interfaccia grafica

Interfaccia

Ho

mep

age

Interfaccia grafica della home page del nuovo navigatore

MAPPA

BARRA DI RICERCA

DESTINAZIONI RAPIDE

Interfaccia

Sono state mantenute tutte le idee esposte nella sezione precedente e, implementate in

modo tale da avere un’interfaccia: semplice, completa e immediata.

Ho

mep

age

Interfaccia

Ho

mep

age

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

Digitazione testuale della destinazione

Centra sulla posizione attuale

Possibilità di pronunciare la destinazione

Pulsanti di interazione con la mappa: zoom in e zoom out

Interfaccia

Ho

mep

age

Indirizzo della posizione corrente

Navigazione verso Punti di Interesse

Pulsante di accesso al menu

Percorsi ciclabili consigliati nei dintorni

Navigazione verso le destinazioni recenti

Navigazione diretta verso casa

Ho

mep

age

Interfaccia

Mo

dal

ità

Nav

igaz

ion

e

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.

MAPPA

INDICATORI SPECIFICI

INDICATORI RAPIDI

Interfaccia

Mo

dal

ità

Nav

igaz

ion

e

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.

INDICATORI SPECIFICI

Interfaccia

Mo

dal

ità

Nav

igaz

ion

e

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

Interfaccia

Mo

dal

ità

Nav

igaz

ion

e

L'area centrale rimane quella più importante e quindi abbiamo deciso di

lasciare uno spazio piuttosto esteso per inserire la mappa del nostro navigatore.

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

Interfaccia

Mo

dal

ità

Nav

igaz

ion

e

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

Interfaccia

Mo

dal

ità

«Fr

ecce

»

Abbiamo deciso inoltre di realizzare anche una particolare interfaccia che contenga

principalmente solamente le indicazioni stradali da seguire sottoforma di ‘’Frecce’’.

Interfaccia

Mo

dal

ità

«Fr

ecce

»

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

Interfaccia

Mo

dal

ità

«So

lo A

ud

io»

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.

Interfaccia

Mo

dal

ità

«So

lo A

ud

io»

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

Interfaccia

Mo

dal

ità

«So

lo A

ud

io»

Mentre lo schermo rimane in standby, il telefono continua a indicare vocalmente o tramite auricolare le indicazioni.

Interfaccia

Mo

dal

ità

«So

lo A

ud

io»

Eventuali scelte richieste di interazione da parte dall’applicazione avverranno tramite gestures.