Il documento presenta un progetto di un'app mobile chiamata tuttaper.me, progettata per rivitalizzare i centri città incoraggiando l'uso dei piccoli negozi attraverso recensioni e coupon. L'applicazione mira a semplificare l'accesso alle informazioni sui negozi locali utilizzando la geolocalizzazione, e si distingue per la sua forte localizzazione rispetto alla concorrenza. Dopo analisi approfondite, il progetto prevede una prototipazione e una progettazione grafica che rendano l'esperienza utente semplice e intuitiva.

1. 1
tuttaper.me
Un’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

2. 3
tuttaper.me
Un’app

3. Indice

4. 5
tuttaper.meIl progetto
Scenario attuale
tuttaper.meUn’app
pag.21
Prodotto: lo scopo
Situazione attuale
Utente: le caratteristiche
Contesti d’uso
Scenari d’uso
Fattibilità tecnologica
Analisi concorrenti
Posizionamento competitivo
Casi d’uso
Descrizione casi d’uso
Task Analysis
pag.23
pag.25
pag.27
pag.29
pag.31
pag.39
pag.41
pag.43
pag.45
pag.47
pag.55
pag.13
pag. 9
tuttaper.meIl prototipo
pag.61
tuttaper.meIl design
pag.77
Analisi della grafica
Studio degli elementi
Progettazione grafica
pag.79
pag.81
pag.85

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

6. tuttaper.meIl progetto

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

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

9. 13
Scenario
attuale
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/

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

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

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

13. tuttaper.meUn’app

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

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

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

17. 27
Utentele 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.

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

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

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

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

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

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

24. 41
Posizionamento
analisi concorrenza
Vista 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

25. 43
Posizionamento
competitivo
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

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

27. 47
Nome: ricerca negozio/coupon tra-
mite localizzazione
Attori: 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/coupon
Estensione:
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

28. 49
Nome: salvare coupon
Attori: 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 coupon
Estensione:
3a L’utente è già registrato
1. l’utente si loggherà sull’appli-
cazione
2. prosegue al passo 4
2

29. 51
Nome: aggiornare i coupon/negozi
Attori: 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

30. 53
Nome: Inserire commento/foto
Attori: 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

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

32. 57

33. 59
Prototipo cartaceo delle schermate
dell’applicazione.

34. tuttaper.meIl prototipo

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

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

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

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

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

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

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

42. 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’applicazione
Il 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.

43. tuttaper.meIl design

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

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

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

47. 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: 57X57px
Icona per AppStore: 512X512px
Icona 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

48. 85
Progettazione
grafica
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.

49. 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.me
tuttaper.me
tuttaper.me
Nome applicazione
Informazioni
Studio per la scelta
del colore per il titolo
dell’applicazione
Icone delle funzioni

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

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

52. 93
Tavola con alcuni esempi di layout
dell’applicazione.

53. 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.meSitografia
http://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.”