UNIVERSITÀ DEGLI STUDI DI TRENTO. Facoltà di Scienze Cognitive Corso di Laurea in ITC Corso di Progettazione di interfacce grafiche

Transcript

1 UNIVERSITÀ DEGLI STUDI DI TRENTO Facoltà di Scienze Cognitive Corso di Laurea in ITC Corso di Progettazione di interfacce grafiche De Moliner Maurizio CITY GUIDE ANNO ACCADEMICO 2010 / 2011

2 Indice Introduzione Idea e motivazione Visual research Interazione e visual design Class diagram, state-machine e descrizione del programma Conclusione...20

3 Introduzione In ambienti sociali, in cui l'applicabilità e l'intuibilità delle applicazioni software prevalgono sulla tecnologia stessa, nascono esigenze e dinamiche che seguono destini diversi rispetto ai modi di sviluppare applicazioni che si utilizzavano negli anni scorsi, facendo nascere discipline proprie di studio di questi aspetti di interazione, un valido esempio pu ò essere lo studio delle interazione uomo-macchina. Nello sviluppo di questo progetto, ho cercato di riconoscere e favorire il piu possibile l'utilizzo della applicazione nella realtà, osservando e immaginandone l'utilizzo nei vari contesti d'uso, adeguandone di conseguenza la disposizione dei vari elementi nell'interfaccia Questa applicazione nasce con la prerogativa di poter essere utilizzata da più fasce sociali, e non limitandosi alla sola fascia giovanile

4 Idea e motivazione A tutti noi avrebbe fatto comodo durante una vacanza o un viaggio avere una guida che indicasse le attrazioni più importanti, i luoghi più belli e interessanti da visitare, informazioni sui ristoranti più vicini o alberghi che ci possano ospitare. Guide per città che ne sono tantissime, di ogni genere e tipologia, dalle ormai vecchie e passate audioguide, alle guide cartacee con itinerari e mappe, e per concludere guide interattive attraverso applicazioni. Proprio a questo scopo nasce CITY GUIDE, come applicativo guida per turisti che visiteranno la città di Trento. L'applicazione sarà supportata inizialmente da smartphone, con poi un'eventuale versione per tablet. Perché un turista dovrebbe preferire questo tipo di soluzione alle altre piu classiche? Perché l'applicazione servirà al turista per orientarsi meglio nella città e nei dintorni, grazie a mappe e descrizioni che rispetto alle classiche e ormai superate guide permettono un approccio piu easy-use, con menù creati appositamente considerando il contesto d'utilizzo, permettendo quindi di evitare intralci e difficoltà che potrebbero rovinare la vacanza. A che fascia di utenti è rivolta questa applicazione? Grazie alla sua intuibilità e facilità d'uso l'applicazione sarà rivolta a un pubblico che comprende ogni fascia di età, rivolgendosi specialmente ai classici turisti impreparati, che non hanno la più pallida idea di come orientarsi, aiutandoli nella scelta di ci ò che hanno intenzione di fare

5 come visitare un museo, mangiare al ristorante più vicino o cercare un albergo. Quali sono le caratteristiche del dispositivo e del contesto? L'applicazione sarà costituita da immagini e descrizioni, con poche parti sonore. L'applicazione dovrà essere molto minimale e di semplice utilizzo in quanto verrà utilizzata camminando e in contesti dove l'attenzione ai particolari è scarsa ( per esempio in fiere e eventi ). Proprio riguardo a questo ultimo punto si deve tenere conto che l'utente utilizzerà l'applicazione con una sola mano, quindi sarà sviluppata principalmente con orientamento verticale, sfruttando lo swipe, in quanto solo un dito ( il pollice ) comanderà il tutto. Visual research Durante lo sviluppo dell'applicazione mi sono imbattuto in numerosi progetti con ottime soluzioni grafiche ma tra tutte, quella che più mi è piaciuta e dalla quale mi sono più ispirato è TripAdvisor per Windows Phone 7. Questa applicazione è stata progettata in modo molto curato e gli elementi sono stati posizionati in modo da facilitarne al massimo l'uso. Un elemento importante dell'interfaccia a cui mi sono ispirato è stata la divisione delle varie informazioni in modo chiaro e con divisioni intuibili per genere. Specialmente mi ha colpito il modo in cui alcune strutture grafiche si ripetevano in modo uguale, ma con informazioni diverse. Questo ultimo punto l'ho trovato molto utile ed efficiente perché grazie a queste strutture l'utente non deve ogni volta capire come è strutturato il

6 menù, in quanto si ripete con al stessa struttura con tutti i tipi di informazione ( hotel, ristoranti, monumenti, ecc). Interazione e visual design Tra le scelte principali e più importanti c'è quella di posizionare i bottoni in modo da non lasciare libero dello spazio altrimenti sfruttabile, ma allo stesso tempo non ammassare troppi elementi nell'interfaccia. Riuscire a trovare un buon compromesso tra spazio libero e spazio occupato permette di migliorare molti aspetti fondamentali per una applicazione Rendere gli elementi facili da distinguere in base alle diverse funzionalità. Aumentare la velocità di utilizzo non introducendo troppi elementi e limitando le possibili scelte effettuabili dall'utente. Un'altra scelta progettuale è stata quella di mantenere alcune parti dell'interfaccia fisse ( barra di ricerca, barra degli strumenti ), cioè presenti in ogni parte del programma ( tranne che in alcune eccezioni come la visualizzazione della mappa ). Questa scelta è stata fatta per permettere all'utente di navigare nel programma ma di avere sempre a disposizione alcuni comandi base, in caso di necessità. Proprio su questo punto è bene approfondire. Le due parti fisse dell'interfaccia sono posizionate in alto e in basso, in modo da lasciare libera la zona centrale dello schermo, nella quale si concentra l'attenzione e nella quale le informazioni cambiano di continuo, e quindi permettere all'utente di concentrarsi su di essa trascurando i bottoni fissi. Le parti fisse permettono di avere a disposizione delle funzionalità che possono essere utilizzate in qualsiasi momento durante l'utilizzo del

7 programma, proprio per permettere al turista di avere le informazioni che desidera nel momento più opportuno senza inutili difficoltà. Osserviamo ora l'interfaccia nei suoi aspetti più dettagliati. La home si presenta con uno stile semplice e intuitivo. L'interfaccia è divisa in 3 zone principali La barra di ricerca - presente nella maggior parte delle interfacce dell'applicazione, permette in qualsiasi momento di cercare informazioni specifiche. Il menu a scelta multipla - composto da sei bottoni che definiscono le possibili scelte. Le prime quattro ( attrazioni, hotel ristoranti, divertimento ) strettamente informative e infine le ultime due : impostazioni, per definire il setting dell'applicazione e commenta per lasciare una recensione su un luogo visitato. La barra degli strumenti - posizionata nella parte inferiore, è presente in tutte le interfacce. Il due bottoni hanno funzionalità molto utili e per questo sono sempre disponibili. Il pulsante Home, il primo dalla sinistra, permette di tornare alla pagina iniziale in qualsiasi momento. Questo bottone è stato creato e posizionato in quella posizione per permettere all'utente di avere una fune di fuga, cioè un modo per tornare sempre alla home nel caso in cui si sia perso nell'applicazione o nel caso in cui voglia cercare informazioni diverse. Il secondo pulsante, In zona permette in qualsiasi momento di cercare i luoghi ( indipendentemente dalla tipologia) più vicini all'utente. La struttura del menù che si presenta dopo aver cliccatto su uno dei bottoni del menù a scelta multipla è uguale per ogni scelta. Questa

8 similitudine di struttura è stata ideata per due motivi principali Creare la minor ambiguità possibile, rimanendo su uno stesso stile, il quale aiuta l'utente a non doversi abituare a più menù ma a uno fisso con soltanto le informazioni che cambiano. Questo punto è molto importante in quanto questo programma sarà utilizzato in contesti nei quali l'attenzione ai particolari non è alta e quindi deve prevalere la facilità e velocità d'uso. Il secondo punto riguardo la minor difficoltà di sviluppo, nella quale la struttura rimane uguale, facendo mutare solamente i dati da inserire, anche questo punto non è da sottovalutare in quanto una maggior facilità di sviluppo permette di risparmiare tempo e denaro. Ipotizzando di selezionare il bottone monumenti passeremo alla seguente interfaccia : Barra di ricerca e barra degli strumenti rimangono invariate. La parte centrale dell'interfaccia mostra una lista di elementi ( in questo caso monumenti, ma con la stessa struttura anche per le altre scelte ). Gli elementi della lista sono disposti in un ordine ben preciso scelto dall'utente tra tre possibili opzioni ( Distanza, Voto, Prezzo ). La lista si presenta in modo verticale e con alcune informazioni in evidenza : - Nome dell'opera - Voto medio ( da 1 a 5 ) - Prezzo ( in questo caso del biglietto) - Distanza dalla posizione attuale dell'utente - Foto di anteprima L'utente navigherà tra la lista con uno swipe verticale ideato appositamente per sfruttare il movimento del pollice e cliccando su una cella della lista entrerà nel dettaglio.

9 Nella progettazione della lista nell'interfaccia è stata appositamente tagliata una cella. Questo è stato fatto per far capire implicitamente all'utente che la lista non si ferma ai primi due elementi, invogliandolo intuitivamente a sfruttare lo swipe. Una volta che l'utente ha visionato tutta la lista e ha scelto ci ò a cui è interessato, con un click sulla cella ( senza distinzioni tra click sull'immagine o click sul nome tutto ci ò perché il tocco in movimento non è sempre cosi preciso) passerà alla pagina di dettaglio. Il menù di dettaglio si presenta in questo modo : Scompare la barra di ricerca che viene sostituita da un' elemento chiamato briciole di Pollicino, il quale mostra il percorso attraverso la gerarchia dell'applicazione. Si ripete la cella con i dettagli del monumento vista nell'interfaccia precedente. La parte centrale dell'interfaccia è divisa in 3 bottoni i quali intuitivamente richiamano a delle funzionalità connesse al monumento. Nella parte inferiore troviamo l'anteprima della lista delle foto riguardanti il monumento

10 Scorrendo nel menù troviamo altri due elementi interessanti : - COMMENTI, cioè l'insieme di tutti i giudizi espressi dagli utenti riguardo quell'opera - CERCA IN ZONA, questa funzionalità molto utile riproporrà una lista di tutti i luoghi ( ristoranti o hotel o luoghi di divertimento ) più vicini al monumento. L' interfaccia della lista sarà uguale a quella vista in precedenza per la lista dei monumenti. Questa interfaccia è ricca di informazioni che potrebbero far confondere l'utente, ma attraverso piccoli accorgimenti l'interfaccia risulta intuitiva e priva di ambiguità. Un accorgimento è quello di dividere le diverse parti dell'interfaccia con dei rettangoli che delimitano i bordi di una funzionalità. Un' altro accorgimento è quello di utilizzare colori uguali per le scelte multiple dell'applicazione : In questo modo l'utente capirà quali sono le possibili scelte, come nel caso dei tre rettangoli centrali che richiamo a tre funzionalità connesse al monumento. Analizziamo ora le interfacce che si sviluppano da quest'ultima appena descritta. Mappe Nel caso in cui l'utente volesse visualizzare la mappa del luogo dove è

11 diretto, gli basterà cliccare sul bottone MAPPA. Le interfacce che si presenteranno all'utente saranno le seguenti Queste quattro interfacce rappresentano le 4 funzionalità della mappa nell'applicazione CITY GUIDE. La prima interfaccia è quella che si presenta all'utente al momento del click sul pulsante MAPPE e

12 rappresenta la vista della mappa con un segnaposto sul monumento stesso. La seconda interfaccia ( alla destra di quella appena descritta ) rappresenta il tragitto più corto dalla posizione dell'utente al luogo del monumento, e viene richiamata con il pulsante Cerca percorso rappresentato sulla barra degli strumenti da una freccia rivolta verso l'alto. La terza interfaccia, è simile alla prima e rappresenta il luogo dove l'utente si trova e il puntatore è posizionato sulla posizione attuale del turista, questa modalità è richiamata tramite il secondo pulsante a forma di mirino chiamato Dove sono. La quarta e l'ultima interfaccia è richiamata dal terzo pulsante Cerca e permette all'utente di ricercare un luogo particolare nella mappa. Dopo aver descritto a grandi linee le funzionalità delle mappe passiamo alla descrizione della parte grafica. Si noti innanzitutto che l'interfaccia delle mappe è molto più spoglia e semplice rispetto alle precedenti apposta per sfruttare meglio lo spazio dedicabile alla mappa. In queste finestre scompare la barra di ricerca, e la barra degli strumenti cambia rispetto a tutte le precedenti viste fin'ora. Questi cambiamento sono stati fatti per sfruttare il più possibile l'area disponibile e per rimanere coerenti allo stile minimalista di Windows Phone 7. Chiama e Non ci soffermeremo molto su queste due interfacce in quanto sono molto intuitive e l'interazione non dura molto come pu ò avvenire con le mappe o con altre parti del programma.

13 Le due interfacce sono le seguenti Nella prima interfaccia compare un rettangolo grigio dallo stile semplice e intuitivo nella parte superiore dello schermo, chiedendo all'utente se vuole chiamare o meno il numero di telefono dell'attrazione che stava esaminando. Nella seconda interfaccia vediamo cosa compare nel caso in cui l'utente decida di inviare una . La finestra che gli comparirà sarà la classica della di WP7, ma con il campo destinatario e oggetto già compilati.

14 Foto Passiamo ora alla visualizzazione delle foto correlate all'opera. Nella pagina di dettaglio si potevano già osservare delle anteprime delle foto, ma nel caso in cui l'utente voglia visualizzare queste foto a dimensione maggiore rispetto alle piccole anteprime, si troverà di fronte a questa interfaccia Innanzitutto notiamo che è scomparsa la barra di ricerca per lasciare il posto a una barra nella quale compaiono di nuovo le anteprime delle foto e in posizione centrale, ingrandita rispetto alle altre, la foto attualmente visualizzata nel centro dello schermo. Grazie a questa barra l'utente potrà scorrere sulle anteprime soffermandosi solamente a quelle che più lo attirano, senza doverle visualizzare tutte come avviene in molti sistemi. Ogni foto è seguita da

15 una breve descrizione e dalla data di caricamento. Commenti I commenti di altri utenti che condividono i nostri stessi interessi sono ormai sul web una tappa fissa per chi è indeciso sul da farsi. Esistono moltissimi forum, blog e siti nei quali i navigatori si ritrovano per scambiarsi informazioni sincere e soggettive su qualsiasi cosa e proprio per questo motivo, leggendo i pareri di altri utenti, molto spesso fa pendere l'ago della bilancia su una scelta rispetto ad un'altra. Basandomi su questo aspetto ho deciso di introdurre in questa applicazione la possibilità di votare e commentare ogni luogo e attrazione presente nel sistema. Quasi in fondo all'interfaccia di dettaglio del monumento troviamo il campo Commenti. Osserviamo ora l'interfaccia che si presenterebbe nel momento in cui l'utente cliccasse sul campo commenti

16 Questo elemento è di notevole importanza per il programma, in quanto da quel tocco in più di interazione e condivisione che all'utente piace molto. Avere la possibilità di lasciare un commento su un determinato luogo e di votarlo, permette sia all'utente di lasciare un proprio parere, sia ad altri utenti indecisi di ripiegare su una scelta rispetto ad un'altra. I commenti possono essere ordinati per Data (dal più recente al più vecchio) o per voto (dal più alto al più basso). Sono strutturati in modo semplice con tre elementi chiave, il commento stesso, il voto e la data di immissione. L'utente potrà quindi visualizzare i commenti, ma come farà a lasciarli? Semplice, nella prima interfaccia, la home, abbiamo visto che c'era un bottone Commenta, questo richiama la seguente interfaccia L'interfaccia è costituita in 3 zone principali, la prima in altro è il dettaglio dell'opera, poi a seguire troviamo il campo vota, nel quale

17 l'utente esprimerà il suo giudizio e sottostane troviamo il campo per il commento vero e proprio, in fondo al tutto ci sarà un bottone per la conferma del guidizio e il conseguente invio. L'utente per votare dovrà essere registrato e se lo è già effettuare un login e questo lo potrà fare nel momento precedente al commento. Cerca in zona L'ultima parte dell'interfaccia dettaglio monumento è costituita dal Cerca in zona. Questa utile funzione riproporrà semplicemente una lista di tutti i luoghi ( selezionati in base al tipo di scelta ) più vicini al luogo del monumento che si stava esaminando. La lista sarà strutturata identicamente a quella vista precedentemente con la lista dei monumenti ma ordinata per distanza e non per prezzo. Class diagram, state-machine e descrizione del programma Nello sviluppo dell'applicazione ho utilizzato solamente classi grafiche basandomi sul comando gotoandstop per spostarmi tra i vari frame e l'utilizzo di maschere per simulare alcuni movimenti. Gli attributi che ho utilizzato sono grafici per esempio colore, altezza, ecc. Nell'applicazione ho cercato di ricreare il più possibile l'effetto grafico e interattivo che ho sviluppato basandomi sulle mie idee e sulla parte cartacea ma non sempre è risultato come lo avevo immaginato per alcuni motivi di natura tecnica e di conoscenze personali riguardanti l'uso di

18 Adobe Flash, ma nonostante ci ò credo che essendo questo un prototipo che poi verrà sviluppato da persone più qualificate e competenti dal punto di vista informatico e di programmazione, l'importante sia la cura e la precisione nella creazione delle interfacce, curando dettagliatamente l'aspetto dell'interazione tra utente e applicazione e la disposizione degli elementi ottimizzando gli spazi e tenendo conto dei contesti d'uso. Uno state-machine (ASF) è un sistema che rappresenta l'avanzamento nelle interazioni, nel quale gli insiemi dei possibili valori di ingresso, uscita e stato sono insiemi finiti. I questo caso noi utilizzeremo un diagramma degli stati, che consiste nel rappresentare l'automa mediante un grafo orientato, i nodi rappresentano gli stati e gli archi le transizioni. Si possono marcare gli stati finali con un doppio circolo, anche se in questa applicazione non esiste un vero e proprio stato finale in quanto il sistema permette in qualsiasi momento di spostarsi tra più interfacce e non c'è un caso in cui l'utente sia arrivato alla fine. Analizziamo il diagramma degli stati dell'applicazione, considerando che tanti collegamenti non sono stati inseriti per evitare troppa complessità, per citare alcuni esempi, dalla maggior parte delle interfacce si può tornare alle home, ma i collegmenti dagli stati alla home non sono stati inseriti, lo stesso vale per il comando In zona grazie al quale si possono cercare i luoghi di interesse piu vicini, anche questo collegamento dagli stati al menù In zona è stato tralasciato per non creare confusione nel diagramma.

19 Il diagramma degli stati è il seguente Analizziamo ora anche uno state-machine. Ho creato lo state-machine che descrive il comportamento dell'interfaccia immagini nella quale l'utente scorre nella barra superiore tra le anteprime e quella centrale automaticamente diventa quella al centro dello schermo. Ovviamente va detto che è stato ideato pensando allo sviluppo in flash e quindi gli eventi sono chiamati utilizzando la parola MOUSE ( MOUSE RELEASE, MOUSE ENTER, ecc ) ma in realtà il sistema è completamente touchscreen.

20 Lo state-machine per la visualizzazione delle immagini è il seguente Conclusione Creare e sviluppare questo progetto mi ha aiutato a capire molti aspetti dell'interazione che ancora non conoscevo. Mi ha aiutato anche a capire che cosa vuol dire preparare un protipo e alle difficoltà che ne seguono, sia progettuali che di tempo. Nella stesura della relazione ho cercato di curare il piu possibile i particolari, sia delle interfacce che della parte linguistica, cercando di non dilungarmi troppo, ma poi inserendo le immagini la relazione è lievitata notevolmente. Tutto sommato devo però dire che mi ha appassionato analizzare le altre interfacce cercando spunti per migliorare la mia e immaginarmi il possibile utilizzo in diversi contesti, lavorando con la fantasia e il ragionamento con sempre a disposizione una base teorica.