SlideShare a Scribd company logo
1 of 55
Download to read offline
NAVIGATORE PER CICLISTI
L’interfaccia Grafica




   Marco Simone Carisio– 755718
     Stefano Manicone– 745361
         Matteo Tizzoni– 760399
Analisi
competitor
 generici                            Interfaccia



             Progettazione

                   Iter di costruzione dell’interfaccia grafica
Analisi
competitor


                                           Progett

    Iter di costruzione dell’interfaccia grafica
Analisi Competitor
Analisi Competitor



              Garmin offre un interfaccia molto
                     SEMPLICE ed INTUITIVA
                      sviluppata su DUE PIANI




                                             primo
                                            secondo
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
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.
Analisi Competitor



     Nella barra superiore, vi sono gli INDICATORI DI STATO

                     INDICATORE      INDICATORE
                     DI SEGNALE   LIVELLO BATTERIA




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




                        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
si Competitor                                            Interfacci




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

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

                                                               BARRA DI RICERCA




                                                                   MAPPA




                                                                DESTINAZIONI
                                                                   RAPIDE
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.
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.
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
Interfaccia



gettazione


                 Iter di costruzione dell’interfaccia grafica
Interfaccia




                                                                         Homepage
              Interfaccia grafica della home page del nuovo navigatore
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
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
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
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
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
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.
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.
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à.
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.
Interfaccia
        Abbiamo deciso inoltre di realizzare anche una particolare interfaccia che contenga
    principalmente solamente le indicazioni stradali da seguire sottoforma di ‘’Frecce’’.




                                                                                              Modalità «Frecce»
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»
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»
Interfaccia




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

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




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




                                                                   Modalità «Solo Audio»

More Related Content

Recently uploaded

Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Associazione Digital Days
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Associazione Digital Days
 
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Associazione Digital Days
 
Programma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoProgramma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoQuotidiano Piemontese
 
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Associazione Digital Days
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Associazione Digital Days
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Associazione Digital Days
 
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Associazione Digital Days
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Associazione Digital Days
 
ScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIinfogdgmi
 

Recently uploaded (10)

Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
 
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
 
Programma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoProgramma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 Torino
 
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
 
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
 
ScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AI
 

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Interfaccia Grafica - Documento Definitivo

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