Interfaccia grafica

926 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
926
On SlideShare
0
From Embeds
0
Number of Embeds
350
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Interfaccia grafica

  1. 1. NAVIGATORE PER CICLISTIL’interfaccia Grafica Marco Simone Carisio– 755718 Stefano Manicone– 745361 Matteo Tizzoni– 760399
  2. 2. Analisicompetitor generici Interfaccia Progettazione Iter di costruzione dell’interfaccia grafica
  3. 3. Analisicompetitor Progett Iter di costruzione dell’interfaccia grafica
  4. 4. Analisi Competitor
  5. 5. Analisi Competitor Garmin offre un interfaccia molto SEMPLICE ed INTUITIVA sviluppata su DUE PIANI primo secondo
  6. 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. 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. 8. Analisi Competitor Nella barra superiore, vi sono gli INDICATORI DI STATO INDICATORE INDICATORE DI SEGNALE LIVELLO BATTERIA ORARIO
  9. 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. 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. 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. 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. 13. Analisi Competitor
  14. 14. Tutta l’interfaccia è basata sulla possibilità immediata di raggiungere ladestinazione 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. 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. 16. All’interno di quest’interfaccia, l’iconacerchiata a nostro avviso è poco intuitiva epoco attinente al contesto. Sarebbe meglio, alivello di user experience, anche all’internodel nostro navigatore, sostituirla con ladicitura “dove sono”.Tappando su questa voce si accede ad unasuccessiva schermata
  17. 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. 18. La funzione di «Pronuncia Destinazione» risulta essere sempre in primo piano!Accedendo alle funzioni secondarie, lamappa rimane sempre visualizzabile perconsentire di proseguire la navigazione.Nel caso di acceda invece a impostazioni primarie,che potrebbero modificare la destinazione, lamappa viene coperta. Premendo il pulsante Touch «Proprietà» è possibile accedere ad un sottomenù riassuntivo delle voci più importanti
  19. 19. Una volta impostata la destinazione vienevisualizzato automaticamente ilpercorso più breve. Questo pulsante permette di specificare eventuali esclusioni (autostrade, pedaggi..)
  20. 20. Questo pulsante permette di visualizzare lealternative di percorso Questo pulsante mostra le indicazioni testuali
  21. 21. Analisi Competitor
  22. 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. 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. 24. Tappando su ‘’Le mie destinazioni’’ nella schermata principale ci vengonoproposte le destinazioni recenti. Effettuando uno slide verso sinistra, èpossibile accedere alle destinazioni impostate come Favorite e allanavigazione verso un contatto presente nella rubrica Destinazioni Recenti Navigazione verso un contatto
  25. 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. 26. Tappando sulla voce “Pianifica Tragitto” si accede alla schermatache 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. 27. Posizione attuale con relative coordinate GPSTappando sull’icona relativa al ServizioEmergenze ci appare questa schermatache ci indica la nostra posizione correntee ci permette di raggiungere la pompa dibenzina, la caserma di polizia, l’ospedaleo la farmacia più vicini
  28. 28. Dopo aver scelto la nostra destinazione ci appare questa schermatariassuntiva 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. 29. Prima di iniziare la navigazione vera e propria ci appare questa schermata checi 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. 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. 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. 32. si Competitor Interfacci Progettazione Iter di costruzione dell’interfaccia grafica
  33. 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 uninterfaccia 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. 34. Progettazione Da questo minuzioso lavoro abbiamo prodotto questo primo wireframe:
  35. 35. Progettazione Come possiamo facilmente notare, linterfaccia è suddivisa in 3 macro aree: BARRA DI RICERCA MAPPA DESTINAZIONI RAPIDE
  36. 36. Progettazione BARRA DI RICERCA Allinterno della barra di ricerca abbiamo pensato di conferire una maggiore importanza ad un: • form di ricerca rapida della destinazione, in cui immediatamente lutente può con un semplice tappa indicare la meta desiderata di iniziare la navigazione. • Sempre relativo allinserimento 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 allutente 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 luso della voce, il ciclista avendo le mani impegnate, potrebbe facilmente interagire con il dispositivo senza levare le mani dal manubrio.
  37. 37. Progettazione Larea 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 lutente e una scelta poco ergonomica di relazionarsi con esso nella maggior parte dei dispositivi. Il fatto di concedere un così ampio spazio, direttamente allapertura dellapplicazione, 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. 38. Progettazione La barra inferiore invece, è quella maggiormente dedicata allinterazione rapida con lutente. 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 linserimento di ulteriori informazioni da parte dellutente. 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 allutente di accedere a tutte le altre funzioni avanzate dispositivo, o di impostare in maniera più tecnica e precisa le destinazioni. DESTINAZIONI RAPIDE
  39. 39. Interfacciagettazione Iter di costruzione dell’interfaccia grafica
  40. 40. Interfaccia Homepage Interfaccia grafica della home page del nuovo navigatore
  41. 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. 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 dellutente 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. 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. 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 recentiNavigazione diretta verso casa
  45. 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. 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 allutente 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. 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 uniconcina che ne facesse subito percepire il significato. Tramite il menu delle impostazioni abbiamo pensato di rendere possibile unulteriore personalizzazione delle informazioni mostrate in modo da rendere linterfaccia in qualche modo flessibile e adattabile ad ogni tipo di esigenza.
  48. 48. Interfaccia Larea 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. 49. Interfaccia Lultima 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 allestrema essenzialità che abbiamo deciso di conferirle: solamente una sottile striscia nera è stata dedicata allindirizzo completo della posizione corrente in quanto è risultata Modalità Navigazione uninformazione 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. 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. 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. 52. Interfaccia Infine, abbiamo deciso di integrare nella nostra interfaccia, lidea 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 lindirizzo verso il quale lutente 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. 53. Interfaccia Modalità «Solo Audio» Prova del lancio della modalità «Solo Audio» nella nostra interfaccia.
  54. 54. Interfaccia Mentre lo schermo rimane in standby, il telefono continua a indicare vocalmente o tramite auricolare le indicazioni. Modalità «Solo Audio»
  55. 55. Interfaccia Eventuali scelte richieste di interazione da parte dall’applicazione avverranno tramite gestures. Modalità «Solo Audio»

×