1

tuttaper.meUn’app

RELATORE: JACOPO PASQUINI

ANNO ACCADEMICO: 2012/2013

CANDIDATO: CAMILLA MELONI

UNIVERSITA’ DEGLI STUDI DI SIENA

MASTER IN “COMUNICAZIONE D’IMPRESA. LINGUAGGI STRUMENTI, TECNOLOGIE”

DI

3

tuttaper.meUn’app

Indice

5

tuttaper.meIl progetto

Scenario attualetuttaper.meUn’app

pag.21

Prodotto: lo scopoSituazione attualeUtente: le caratteristicheContesti d’usoScenari d’usoFattibilità tecnologicaAnalisi concorrentiPosizionamento competitivoCasi d’usoDescrizione casi d’usoTask Analysis

pag.23pag.25pag.27pag.29pag.31pag.39pag.41pag.43pag.45pag.47pag.55

pag.13

pag. 9

tuttaper.meIl prototipo

pag.61

tuttaper.meIl design

pag.77

Analisi della graficaStudio degli elementiProgettazione grafica

pag.79pag.81pag.85

7

IntroduzioneIn questa tesi vengono affrontate le diverse fasi di progettazione di un’applicazione mobile. Da un primo studio del panorama mediatico attuale, per comprendere il potenziale dell’og-getto della progettazione, si è passati ad uno studio più concreto su cosa è tuttaper.me, pi-attaforma internet che si prefigge di animare le strade dei centri città attraverso la recensione dei suoi piccoli negozi.Una volta capito il tipo di oggetto da progettare, si passa ad un’analisi della situazione odierna del progetto e dei suoi utenti. Quindi si cerca di capire, in che modo il nuovo prodotto andrà ad interagire nel mondo reale e con l’utente. Questa comprensione avviene grazie all’ipotiz-zazione degli scenari d’uso e alla descrizione dei casi d’uso. Una volta capito che tipo di op-erazioni deve poter svolgere l’utente sull’appli-cazione si passa alla prototipazione, cioè alla creazione cartacea o digitale (wireframe) di un prototipo che inizi a dare concretezza al pro-getto. Dopo di chè, si passa alla fase di proget-tazione grafica all’applicazione, una veste che sia di semplice comprensione e di facile utilizzo per l’utente.

tuttaper.meIl progetto

9

Tuttaper.me parte dall’idea di resti-tuire vita ai centri città, riportando le persone a viverli come facevano una volta.In una società, come quella di oggi, dove si viene portati a il nostro “shop-ping” nei grandi centri commerciali, per risparmiare , non sempre, tempo e denaro; i luoghi che una volta erano al centro della vita della città vengono abbandonati. Tuttaper.me nasce con lo scopo di riportare le persone a fare le proprie spese in questi luoghi; di restituire bellezza, dinamicità e divertimento ai centri città. Un modo pratico e sicuro per sfruttare le risorse tecnologiche in modo anticonvenzionale che aiuti a ri-valutare le piccole imprese all’interno di una società caotica e vorticosa in senso globalizzante.

11

Il portale, si presenta come un network fortemente localizzato dove dei redat-tori si occupano di scoprire e recensire i negozi, escludendo i grandi marchi, le grandi catene di distribuzione e logi-camente i centri commerciali. Il progetto ha due tipi di utenze di-verse, da una parte i commercianti cui viene data la possibilità di pubblicizza-re il negozio in modo differente dalla pubblicità tradizionale; dall’altra parte i consumatori che, attraverso il portale, possono rimanere informati sugli eser-cizi del proprio centro città e magari scoprire negozi di cui non era a cono-scenza.

13

Scenarioattuale

Nell’ultimo decennio stiamo assisten-do ad una rivoluzione delle tecnologie e del modo di usufruire di internet. Con l’avvento degli smartphone, più precis-amente con l’introduzione nel mercato nel 2007 dell’iphone e dell’app store di Apple, si assiste ad un cambiamento del panorama mediatico, che li vede protagonisti nel mondo dei media.Da molti anni si parla del superamento degli accessi ad internet da dispos-itivi dekstop da parte degli accessi da dispositivi mobile. Mary Meek-er in una ricerca per Morgan Stan-ley ipotizza (il 2014 non ha ancora dati da rilevare) il 2014 come l’an-no del sorpasso dell’internet mobile.

Marco Massarotto “Mobile Marketing. Riflessioni sul nuovo rapporto tra azienda e consumatore.” Posizione 25

Mary Meeker:Mobile Internet will soon overtake fixed Internet. http://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-fixed-internet/

15

Grafico di Mary Meeker per Morgan Stanley, 2010, si rileva il 2014 come anno di sorpasso del mobile sul dekstop

17

Marco Massarotto “Mobile Marketing. Riflessioni sul nuovo rapporto tra azienda e consumatore.” Posizione 194

La nostra società sta assistendo ad un cambiamento profondo che incide sul nostro stesso stile di vita trasfor-mandolo in un “mobile lifestyle”, dove gli smartphone e il touch non sono solo dispositivi per trascorrere il tem-po libero, ma divengono sempre più apparecchi indispensabili, o quasi, nelle diverse fasi della nostra vita. At-traverso di loro, rimaniamo connessi con gli altri, giochiamo, impariamo, ci informiamo e lavoriamo.Internet diventa mobile e cambiando il rapporto delle persone con la Rete, il modo in cui vengono prodotti e fruiti i contenuti cambia e così anche la natura della navigazione, della ricer-ca dei contenuti e quindi l’esperienza dell’utente.Oggi le aziende che intendono raggi-ungere l’utente ed instaurare un rap-porto con questo devono pensare alla comunicazione in modo diverso

19

rispetto a quello che è stata fino ad ora.L’evoluzione del mezzo dovrebbe portare ad una evoluzione parallela del messaggio. Questo non sempre avviene. Spesso la prima precede la seconda. Se ormai da un decennio si assiste all’evoluzione del mezzo è solo da pochi anni che le aziende han-no iniziato a capire che c’è bisogno di un’evoluzione del messaggio, sia nella presentazione che nel contenuto, vis-to che il modo di fruizione è cambiato totalmente.L’azienda deve, attraverso una pie-na comprensione del nuovo mezzo e dell’utente, riuscire a creare un nuovo messaggio che coinvolga il cliente in un’esperienza piacevole e se possibile utile, che in seguito vorrà ripetere.

tuttaper.meUn’app

21

Dopo un’attenta analisi dello scenario attuale ed un’accurata osservazione della struttura del progetto tuttaper.me è emerso che la maggior parte delle fruizioni avviene ancora da disposi-tivi desktop, con in secondo piano gli smartphone e i tablet. Da queste con-siderazioni diventa evidente che il sito responsive del progetto, non è suffici-ente ad una fruizione dello stesso in situazioni dove i dispositivi mobili han-no una diretta relazione con la realtà, è quindi necessario un ragionamento in chiave mobile del progetto. Ripensare ai contenuti in relazione al loro “nuovo” modo di fruizione, dare cioè all’uten-za la possibilità di accedervi in modo diretto, semplice e veloce; elaborare un sistema che dia sfogo al bisogno di pragmaticità insito nella società con-temporanea.

23

Prodotto lo scopo

L’applicazione tuttaper.me avrà lo scopo di rendere il portale del pro-getto più accessibile all’utente da una postazione mobile. Grazie alla geolo-calizzazione sarà più semplice vedere quali negozi di nostro interesse sono vicini a noi. L’app darà la possibilità al commerciante di promuovere la sua attività anche attraverso l’integrazione di un sistema di coupon, offerte che invoglieranno l’utente a visitare il suo negozio. Il portale già esistente diventerà, at-traverso l’applicazione mobile, più semplice da usare anche fuori casa. L’utente potrà non solo vedere ciò che i negozi del suo territorio gli offrono ma potrà anche condividerlo con gli ami-ci, leggere le opinioni altrui e scriverne di personali, pubblicando o no anche una foto del posto. Potrà lasciare un feedback sulla sua esperienza che po-trà essere utile ad un altro utente.

25

Situazione attuale Nonostante lo scenario attuale con-

fermi la direzione ipotizzata da Mary Meeker, analizzando le statistiche del progetto tuttaper.me è risultato che ancora la maggior parte degli utenti vi acceda da dispositivi desktop e solo in piccola parte da dispositivi mobile, nonostante il sito responsive. Questo può essere determinato, magari, dal fatto che la sola struttura responsive non renda ancora del tutto ben fruibili i contenuti e quindi si fatica a reperire le informazioni nei momenti in cui si usu-fruisce maggiormente dei dispositivi mobili. A volte predisporre semplice-mente la struttura per un uso su dis-positivi mobili non è sufficiente, ma è necessario invece un ripensamento dell’intero progetto in chiave mobile.

Grafico dei dispositivi da cui l’utente accede al sito -dettaglio sito dedicato a Mestre.

27

Utente le caratteristiche

Grafico sulla distinzione di genere negli accesi al sito

Grafico sulle fasce d’età degli utenti del sito

L’applicazione sarà destinata ad un pubblico sia maschile che femmi-nile, di età compresa dai 18 ai 45/50 anni, in possesso di uno smartphone o tablet (apple-android). Persone in-teressate allo shopping, che non ne-cessiteranno di alcuna conoscenza tecnologica specifica.

29

Contestid’uso

L’app tuttaper.me, istallata su un dis-positivo mobile o tablet potrà essere usata sia in un contesto casalingo, in pieno relax davanti alla tv, oppure in città, mentre si è sull’autobus per an-dare al lavoro, durante la pausa pran-zo, durante una passeggiata in centro. L’importante è che l’utente disponga o di una rete wi-fi o di un qualsiasi ab-bonamento internet sul dispositivo in cui è istallata l’applicazione.

31

Scenarid’uso

Laura, ha appena finito di pulire casa e si rilassa sul divano, si guarda le mani e le vede sciupate, quindi pensa che dovrebbe comprare una nuova crema idratante, prende lo smartphone o il tablet, avvia l’app e dopo aver scelto la città da una rapida occhiata ai cou-pon offerti dai centri estetica alla ricer-ca di un offerta per la crema, la trova e con un semplice tap apre l’offerta, legge le informazioni e decide di sal-varla, in modo che, appena avrà tem-po e si troverà a passare nei dintorni del negozio, potrà usufruire del cou-pon. Dopo aver effettuato l’accesso con i dati di facebook , Laura salva il coupon e da uno sguardo alla pagina del negozio per capire se quel negozio potrebbe essere utile anche ad altre necessità estetiche. 1

33

2

Paola è appena uscita dall’ufficio per la sua pausa pranzo, ma si ricorda che deve comprare delle ballerine da abbinare all’abito che indosserà la sera, quindi con il suo smartphone avvia l’applicazione e attraverso la lo-calizzazione e la selezione della cat-egoria che a lei interessa, evidenzia sulla mappa tutti i negozi di scarpe vicini e controlla se per caso ci sono dei coupon attivi. Individua un negozio di scarpe proprio nel tragitto che va dall’ufficio al suo bar preferito. Si reca in negozio compra le scarpe e dopo decide di lasciare un commento sul-la pagina del negozio, quindi accede con il suo profilo facebook e scrive il commento che decide di condividere anche sulla sua pagina facebook.

35

Anna sta aspettando il suo turno alle poste, per ingannare il tempo prende il cellulare e visto che si trova in centro perché non vedere se il coupon che aveva salvato è sempre valido? Avvia l’applicazione, effettua il login e apre direttamente il book con i suoi negozi preferiti e i coupon salvati, individua il coupon che le interessa e apre i detta-gli per vedere se è sempre valido e per leggere i dettagli d’uso. Appena Anna finisce di pagare alle poste si reca nel negozio per usufruire del coupon.

3

37

Marco sta tornando a casa in macchi-na dopo essere andato a prendere i suoi due figli da scuola, i bambini piut-tosto agitati iniziano a giocare con il TomTom lasciato accidentalmente nei sedili posteriori. Dopo dieci minuti di gioco il TomTom si rompe e marco ac-cortosi del disastro, si ricorda anche che quello era un regalo della moglie; quale modo migliore per rimediare se non cercare il negozio più vicino che effettua riparazioni o che gliene for-nisca uno identico da poter sostituire quello rotto. Marco avvia l’app tutta-per.me e dopo essersi localizzato ef-fettua una ricerca sulla categoria di elettronica, scoprendo che proprio sulla via che dovranno percorrere c’è un piccolo negozio che effettua assis-tenza. Marco dopo essersi recato al negozio ed aver lasciato l’apparecchio ad aggiustare, ha solo una preoccu-pazione… spiegarlo alla moglie.

4

39

Fattibilitàtecnologica

L’applicazione può essere creata gra-zie a programmi di sviluppo già in uso: il programma Xcode, per mac, per lo sviluppo di applicazioni per iphone; mentre MIT App Inventor, per lo svi-luppo di applicazioni per Android.Su internet sono anche presenti appli-cazioni come App Builder e CoronaL-ab che permettono di creare applica-zioni funzionanti e di pubblicarle.

41

Posizionamentoanalisi concorrenzaVista la forte localizzazione del portale

tuttaper.me non ci sono concorren-ti diretti, che adottano le stesse tec-nologie o sistemi d’interazione con l’utente. Esistono sul territorio società che si occupano di creare volantini cartacei con all’interno dei coupon of-ferti da commercianti. Per quanto riguarda le applicazioni po-trebbero essere potenziali concorrenti: l’applicazione di Groupon che offre un sistema di couponaggio e la possibilità di visualizzarli dividendoli per città. Op-pure l’applicazione Foursquare, social network che fa della geolocalizzazione la sua forza. Su questo social net-work le persone possono attraverso un check in, far sapere ai propri amici in quale locale o posto del mondo si trovano, possono lasciare un’opinione o una foto.

Schermata desktop Foursquare

Schermata desktop Groupon

43

Posizionamentocompetitivo

L’applicazione tuttaper.me, rispetto ai due concorrenti individuati (Four-square e Groupon) è caratterizzata da una forte territorialità. Questa caratter-istica è data dagli stessi editor che vi-vono in prima persona i luoghi recensiti e aiutata dalla possibilità di geolocaliz-zarsi così da visitare i luoghi da noi co-nosciuti con occhi diversi. Rispetto a Groupon unisce alla possibilità di con-divisione anche la possibilità di lascia-re un proprio feedback sull’esperienza avuta con il negozio.

Schermata applicazione Foursquare

Schermata applica-zione Groupon

45

Casi d’usoIndividuare i casi d’uso, permette al progettista di capire come permettere all’utilizzatore finale, di usare l’applica-zione nel modo più semplice e funzio-nale possibile.L’individuazione di questi casi, come la loro descrizione, viene fatta con l’obi-ettivo di capire come l’utente potrà uti-lizzare il sistema, quindi avranno come centro l’utente e non le funzionalità del sistema.- Ricerca negozio/coupon con localizzazione- salvare coupon- aggiornare i coupon/negozi- inserire commento/foto

Diagramma dei casi d’uso

47

Nome: ricerca negozio/coupon tra-mite localizzazioneAttori: Utente, Applicazione

Scenario principale: 1. L’utente accede all’app localizzandosi 2. l’app individua il luogo in cui si trova l’utente e lo visualizza sulla cartina 3. l’utente dalla legenda del-la cartina decide la categoria di nego-zi/coupon da visualizzare su essa 4. Sceglie il negozio/coupon 5. Visita la pagina del nego-zio/couponEstensione:1a. L’utente decide di non localizzarsi 1. l’utente sceglie manual-mente la città 2. seleziona la categoria di negozi/coupon di suo interesse 3. si continua al passo 4

Descrizionecasi d’uso

1

49

Nome: salvare couponAttori: utente, Applicazione

Scenario principale: 1. L’utente scorre i coupon disponibili 2. L’utente apre in dettaglio il coupon di suo interesse 3. Decide di effettuare la reg-istrazione attraverso i dati facebook per poter salvare ed usare in futuro il coupon 4. Il sistema autentica i dati e salva il couponEstensione:3a L’utente è già registrato 1. l’utente si loggherà sull’appli-cazione 2. prosegue al passo 4

2

51

Nome: aggiornare i coupon/negoziAttori: Amministratore, Applicazione

Scenario principale: 1. l’amministratore accede alla parte amministrativa dell’applica-zione 2. apre la parte relativa ai coupon/negozi 3. elimina i coupon scaduti 4. inserisce i coupon nuovi e i negozi nuovi.

3

53

Nome: Inserire commento/fotoAttori: Utente, Applicazione

Scenario principale: 1. l’utente atterra sulla pagi-na del negozio 2. Decide di effettuare la reg-istrazione attraverso i dati facebook per poter scrivere un commento o caricare una foto 3. Il sistema lo autentica e gli presenta il modulo di scrittura/carica-mento foto 4. L’utente scrive il commen-to e lo invia 5. L’applicazione pubblica il commento

4

55

TaskAnalysis

In seguito alle analisi eseguite in pre-cedenza, si prosegue con la stesura dei compiti che un’applicazione deve poter far eseguire.Qui si inizia a dare una forma più con-creta al prodotto, cercando di visual-izzare tutte le azioni che l’utente po-trà eseguire sull’applicazione, e le loro relazioni.In base al diagramma di flusso, ver-ranno poi eseguite delle tavole, dove si cerca di dare forma ai comandi rap-presentati nel diagramma. Queste tavole serviranno poi per la creazione di un prototipo, che meglio spiegherà queste interazioni.

57

59

Prototipo cartaceo delle schermate dell’applicazione.

tuttaper.meIl prototipo

61

Il prototipo digitale, permette di spie-gare le interazioni dell’applicazione, in modo da poter comprendere meglio la relazione con l’utente e i passaggi necessari per lo sviluppo dell’applica-zione. L’applicazione è pensata per disposi-tivi IOS.L’app al suo avvio da la possibilità di navigare al suo inerno in maniera anonima oppure autenticata.La prima modalità permette di essere usufruita sia scegliendo autonoma-mente la città in cui cercare i negozi o i coupon, sia attraverso la localizzazi-one; il sistema rintraccia l’utente su una mappa e mostra a quest’ultimo i negozi intorno a lui.La seconda modalità permette all’utente di tenere traccia dei negozi da lui preferiti e dei coupon che più gli interessano.

63

Attraverso la navigazione autenticata, l’utente potrà decidere se navigare at-traverso la localizzazione, la scelta del-la città oppure visitare il suo “book”; questa avviene attraverso i dati Face-book, in modo da non dover compi-lare un altro modulo e dover inventare un’altra password.

65

Il “book” tiene traccia dei negozi preferiti e dei coupon che interessano all’utente, da qui oltre a localizzarsi o scegliere la città, l’utente potrà visi-tare la pagina de negozio o il dettaglio del coupon con un semplice tap su “dettagli”. Da queste potrà tornare indietro con un semplice drag.

67

Dalla pagina del negozio è possibile visitare la parte dedicata ai commen-ti degli utenti e la parte dedicata ai coupon.La pagina dedicata ai commenti per-mette di leggere i commenti in ordine cronologico e di vedere le foto che scorrono in uno slider. Con un tap sull’icona della scrittura commento, si aprirà un’area dove scrivere e revisionare il messaggio pri-ma di pubblicarlo; mentre con un tap sull’icona della pubblicazione delle foto si aprirà un modulo del carica-mento delle immagini e la loro antep-rima da revisionare e poi pubblicare.

69

Altra cosa che si può fare dalla pa-gina del negozio è visitare la parte dedicata ai coupon.Con un tap si aprirà una lista delle offerte del negozio, logicamente se ci sono. Queste offerte sono in ordine di sca-denza e selezionandone una si può aprire i dettagli dell’offerta. Questi coupon possono essere sal-vati o condivisi. La prima opportunità permette all’utente di utilizzarli in un secondo momento e di ritrovarla facilmente tra le voci del suo “book”, mentre la seconda possibilità per-mette all’utente di condividerla sulla sua pagina facebook oppure tramite twitter.

71

Attraverso la localizzazione, non autenticata, si avrà sempre presente nella barra in basso la possibilità di login.La localizzazione viene effettuata dopo un semplice tap sullo schermo, in seguito si può selezionare dalla legenta in alto a destra cosa si sta cercando, quindi se si vogliono visual-izzare, quali negozi o coupon voglia-no vedere e di quale categoria ( sport, elettronica, fashion,design).Una volta scelto cosa vedere sulla mappa verranno evidenziate le nostre scelte, sulle quali basterà un tap per aprirne il dettaglio (pagina del negozio o dettaglio del coupon). Dopo di che basterà o accedere e fare le operazi-oni possibili da autenticato oppure si può semplicemente tornare indietro.

73

Nel momento in cui si sceglie la città si ha la possibilità di decidere tra le città, recensite nel portale, attraverso uno slider. Una volta selezionata la città, l’utente si trova davanti ad una mappa con evidenziati tutti i negozi; attraverso la legenda si può decidere di selezionare una categoria ed avere solo quella evidenziata sulla mappa. Nel momento in cui si vuole salvare un coupon o scrivere un commento su un negozio visitato si deve effettu-are l’accesso, altrimenti dopo la con-sultazione si potrà tornare alla mappa semplicemente tornando indietro.

75

È importante ricordare che l’utente può interagie con l’applicazione attra-verso due semplici mosse:Il Tap: semplice tocco dell’utente sullo schermo, nella posizione in cui sono state collocate le icone. Questa op-erazione permette di attivare le icone che faranno svolgere una determinata funzione all’applicazioneIl Drag: il semplice trascinamento in orizzontale, da sinistra verso destra, della pagina con la punta del dito. Questa operazione permette all’utente di tornare indietro di un passaggio.

tuttaper.meIl design

77

La fase successiva, alla definizione delle interazioni e del prototipo, è lo studio dell’interfaccia grafica dell’ap-plicazione.L’interfaccia grafica è la parte visiva dell’app, quella che l’utente vedrà e con cui interagirà.Su di essa ricade la possibilità di co-municare le limitazioni, lo stato delle interazioni e le possibilità. Ha il compi-to di raccontare agli utenti cosa stan-no vedendo, come funziona e perchè devono interessarsene. Dan Saffer “Design dell’interazione. Creare applicazi-

oni intelligenti e dispositivi ingegnosi con l’interaction design.” Luke Wroblewski sul design visivo. pag.134

79

Analisidella grafica

La prima fase di progettazione grafica consiste nello studio degli elementi già presenti del progetto tuttaper.me (sito Internet) e degli elementi che andran-no a comporre graficamente l’applica-zione.Gli elementi già presenti sono il logo tuttaper.me e il sito internet. Dall’analisi di questi risulta evidente che i colori predominanti sono il vio-la, il bianco e l’arancione; questi colori si ripropongono non solo nel logo ma anche nelle varie schermate del sito.Il carattere tipografico usato è Helveti-ca della famiglia sans-serif.

Logo tuttaper.me

home mestre.tuttaper.me home tuttaper.me

Helvetica

Palette colore

81

Studiodegli elementi

Dopo una breve analisi degli elemen-ti già esistenti, si affronta l’analisi del mezzo su cui andiamo a progettare.Questo permette di tenere presente gli elementi necessari alla progettazione dell’interfaccia grafica. L’applicazione tuttaper.me è progettata per dispositivi IOS7, quindi la progettazione grafica terrà presente degli elementi e delle caratteristiche dei dispositivi IPhone5. Gli elementi importanti di questo supporto sono le dimensioni dello schermo: 640X1136px e gli elementi standard nelle applicazioni: -La Status Bar: dove possiamo vedere l’ora, lo status della batteria e la rete, questa è già presente e standard nei dispositivi IOS7.-La Nav Bar: elemento dell’applicazi-one che di solito riporta il nome della

Nav Bar

Status Bar

Custom Content

Tab Bar

83

stessa o i pulsanti di navigazione.-Il Custom Content: dove sarà inserito il contenuto dell’app-La Tab Bar: dove vengono inserite le icone dei comandi e delle funzi-oni, questa di solito come la Nav Bar rimane invariata in tutta l’applicazione.

Ultimo elemento a cui prestare molta attenzione è l’icona dell’app, ques-ta comparirà sulla home dell’iphone, sull’AppStore e nei risultati di ricerca Spotlight e nelle Impostazioni.Queste icone dovranno rispettare del-le misure standard:Icona per Iphone: 57X57pxIcona per AppStore: 512X512pxIcona per ricerche spotlight e im-postazioni: 29X29px.

Icona per AppStore: 512X512 px risoluzione: 1024X1024 (raccoman-data)

Icona per Iphone: 57X57 px risoluzi-one: 114X114 Alta risoluzione

Icona per ricerche spotlight e im-postazioni: 29X29 px risoluzione: 54X54 Alta risoluzione

85

Progettazionegrafica

La progettazione grafica è cominciata dagli elementi fondamentali evidenziati nello studio prima effettuato, per con-cludersi poi con la progettazione grafi-ca dei contenuti. Il primo oggetto progettato è l’icona dell’applicazione. Visto che il progetto tuttaper.me è atti-vo e riconoscibile attraverso il suo logo è stato pensato di utilizzare il logo st-esso come immagine per l’icona, sen-za variazione di colore e forma.

87

In seguito è stata progettata l’interfac-cia grafica dell’applicazione, i colori e il carattere tipografico usato per i titoli e i testi.È stato deciso di usare i colori presen-ti sia nel logo che nel sito e lo stesso carattere tipografico.Le prime parti dell’applicazione ad essere state progettate sono state la Nav Bar e la Tab Bar con le icone delle funzioni dell’applicazione.Sulla Nav Bar è stato deciso di ripor-tare il nome dell’applicazione e di met-tere un pulsante per le informazioni sul progetto e l’applicazione. Questa rimarrà sempre uguale come anche la Tab Bar. In quest’ultima sono state in-serite tre icone che rappresentano le tre funzioni principali dell’applicazione.La Localizzazione, la scelta volontaria della cattà e la visita delle preferenze.

Palette colore

Helvetica

tuttaper.metuttaper.metuttaper.me

Nome applicazione

Informazioni

Studio per la scelta del colore per il titolo dell’applicazione

Icone delle funzioni

89

Per sfondo è stato scelto il colore vio-la, e non l’arancione o il bianco. Ques-to colore viene schiarito nella Nav Bar e nella Tab Bar. È stato scelto il viola per mantenere un collegamento diretto con lo sfondo del logo. Il viola nello sfondo, l’aran-cione nelle icone e nel titolo, il bianco per creare le trasparenze della tab Bar, Nav Bar e nei riquadri dei contenuti.Le icone delle funzioni risultano sempli-ci, e riportano tutte il nome della loro funzione. Una richiama il book dove si possono trovare i negozi e i coupon salvati, un’altra richiama la funzione di localizzazione e l’altra la scelta della città. Queste icone sono sempre pre-senti in tutte le schermate dell’applica-zione, al centro della Tab Bar.Altra icona presente nell’app è quella che richiama il login, questa si troverà all’avvio dell’app; il login però può es-sere effettuato in qualsiasi momento cercando di accedere al book.

Login

Funzione book

Funzione localizzazi-one

Funzione scelta cit-tà

91

Altro elemento di interesse nella pro-gettazione è stato il contextual menù che ritroviamo sia nella sezione book, che nelle altre due sezioni di localiz-zazione e scelta della città.Nella prima da la possibilità di vedere i negozi o i coupon salvati; la piccola appendice sotto il menù indica in quale parte di questo si sta navigando. Nelle altre due schermate scegliendo l’una o l’altra voce si apre la legenda per selezionare cosa vedere sulla cartina.

contextual menù

Scelta città

Book

Localizzazione

93

Tavola con alcuni esempi di layout dell’applicazione.

95

Dan Saffer “Design dell’interazione. Creare applicazioni intelligenti e dispos-itivi ingegnosi con l’interaction design.”

tuttaper.meLa bibliografia

Roberto Polillo “Facile da usare. Una moderna introduzione all’ingegneria dell’usabilità.” tuttaper.me

Sitografiahttp://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-over-take-fixed-internet/

http://www.lukew.com/touch/

https://developer.apple.com/library/ios/documentation/UserExperience/Con-ceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556

Marco Massarotto “Mobile Marketing. Riflessioni sul nuovo rapporto tra azien-da e consumatore.”