Mediawave: Nuovo Progetto Per Rivista Multimediale Per iPAD

Universit degli Studi di Firenze
Facolt di Architettura Corso di Laurea in Disegno Industriale

Anno accademico: 2011/2012 Sessione straordinaria dicembre 2011
Mediawave: nuovo progetto per rivista multimediale per iPad

Relatore:
Alberto Di Cintio
Correlatori:
Gianpaolo DAmico, Lea Landucci, Andrea Ferracani, Daniele Pezzatini

Laureando:
Giacomo Bianchi
MEDIAWAVE: NUOVO PROGETTO PER RIVISTA MULTIMEDIALE PER iPAD
Ringraziamenti
Un primo doveroso ringraziamento spetta al professore Di Cintio, che ha accettato il ruolo di relatore per questa tesi, al professore DAmico e alla professoressa Landucci che mi hanno offerto la possibilit di svolgere questo lavoro allinterno del centro di ricerca universitario MICC e che mi hanno proposto il tema di tesi. E poi giusto condividere la buona riuscita del progetto con Andrea Ferracani e Daniele Pezzatini per la loro pazienza ed i loro consigli geniali. Un caloroso ringraziamento spetta anche a Nikrooz Hosseini per laiuto che mi ha offerto nella gestione dei contenuti dellapplicazione. Infine ringrazio i miei genitori e mio fratello, in fondo questo traguardo anche merito loro.
ii
Indice
Ringraziamenti Introduzione 1 Studio di Creativit
1.1 1.2 1.3 1.4 1.5
ii
Generalit iPad Linguaggio 1.3.1 HTML5 1.3.2 CSS3 Targeting Analisi dei prodotti esistenti
Content management
2.1 2.2 2.3
Brainstorming Scelta dei protagonisti Categorizzazione
21
Information Architecture
3.1 3.2 3.3 Struttura di navigazione 3.1.1 Flow chart Unit informativa Wireframe
32
Graphic design
4.1
4.2
Interface design 4.1.1 Fonts 4.1.2 Colori 4.2.3 Logo Proposte grafiche 4.2.1 Soluzione finale
47
INDICE
Metafore di interazione innovative

5.1 Nuove tipologie di interazione 5.1.1 Interazione sensor based 5.1.2 Interazione gesture based
65
Conclusioni Bibliografia Sitografia
73
75
77
Introduzione
Lo scopo di questa tesi di ricerca quello di descrivere il lavoro di progettazione e sviluppo dellapplicazione web del numero zero di un magazine digitale che tratta argomentazioni, che gravitano attorno alluniverso della rete, riportate su supporto Apple iPad. La sua realizzazione ha riguardato il periodo del tirocinio svolto dal mese di giugno al mese di dicembre 2011. Il tirocinio stato effettuato presso il centro di eccellenza universitario MICC, media integration and communication center di Firenze. Il progetto si propone di raggiungere due obiettivi che riguardano rispettivamente i contenuti e la ricerca di nuove metafore di Interaction Design. Da una parte, quello di raccontare storie ed esperienze in grado di interessare ed ispirare le carriere professionali di chi se ne interessa. Gli argomenti contenuti nel magazine infatti, riguardano una serie di interviste realizzate ad un determinato numero di persone che, partendo dal Master in Multimedia Content Design e successivamente lavorando per grandi aziende in tutta Italia, hanno specializzato le loro conoscenze nellambito del web management. Dal punto di vista tecnologico, lapplicazione si propone di teorizzare una nuova forma di interazione tra lutente ed il dispositivo attraverso nuove forme di gestualit che possono essere riconosciute ed interpretate. Il progetto del descritto in questo elaborato sar inoltre sviluppato per conto del centro di ricerca universitario e utilizzato come matrice strutturale per i successivi numeri del magazine che saranno pubblicati saltuariamente. Questa tesi si inserisce nellattuale contesto di sviluppo e ricerca. Infatti laffermarsi di apparecchi mobili multifunzionali come iPad, ha portato alla nascita di nuove tipologie di interazione uomo-macchina. La fruizione delle informazioni si spostata dalla dimensione domestica alla dimensione mobile garantendo allutente unesperienza multimediale incentrata anche in attivit sensoriali come una gestualit del tutto naturale con la quale si approccia allapparecchio. I capitoli dellelaborato affrontano in ordine cronologico le varie fasi di realizzazione del progetto. Il primo capitolo tratta lo studio dallanalisi del supporto iPad, del linguaggio di programmazione HTML5 e di eventuali framework utili al suo sviluppo e dei prodotti simili gi esistenti. 3
INTRODUZIONE
Nel secondo capitolo si affronta una ricerca di mercato (effettuata in maniera teorica) nella quale vengono ipotizzati e riconosciuti i possibili target del magazine e unanalisi dei contenuti. Le conoscenze e le esperienze dei protagonisti della rivista vengono sviluppate e categorizzate in gruppi. Le interviste risultano cos, suddivise in argomenti comuni e relazionabili tra loro. Nel terzo capitolo la tesi affronta la struttura dellapplicazione a partire da quella complessiva, con le relazioni ed i collegamenti intertestuali, fino ad arrivare a quella della singola pagina, servendosi di specifici wireframe per definirla in maniera abbozzata. Il quarto il capitolo dedicato allinterfaccia, dove si definiscono gli stili grafici, i colori ed i font pi appropriati servendosi delle informazioni pervenute fino a questo momento come quelle del targeting. Il quinto ed ultimo capitolo infine, a differenza dei precedenti interamente teorico, tratta le nuove proposte di interazione applicate al magazine con le quali approfondire il rapporto di natura sensoriale tra lutente ed il supporto.
Capitolo 1
Studio di creativit
1.1 Generalit
Il progetto intende trattare lambito del web management e dei digital media, affrontandone i vari aspetti attraverso i punti di vista dei protagonisti del magazine ed stato pensato, progettato e sviluppato per il supporto mobile iPad. Esso fa parte della famiglia delle web applications espressione generalmente impiegata per indicare tutte quelle applicazioni che, a differenza delle classiche applicazioni acquistabili dallApple Store, sono accessibili via web, nel caso di iPad attraverso il browser Safari, che utilizza il supporto del linguaggio per ipertesti HTML5 unito con il linguaggio di formattazione CSS3. iPad prodotto dalla Apple Inc. , azienda informatica statunitense che produce sistemi operativi, computer e dispositivi multimediali con sede a Cupertino, Silicon Valley, fondata da Steve Jobs e Steve Wozniak nel 1976. Il dispositivo stato presentato da Steve Jobs il 27 gennaio 2010 ad una conferenza Apple allo Yerba Buena Center for the Arts Theater di San Francisco, dopo unintensa campagna mediatica composta esclusivamente da indiscrezioni. Prima di tale data Apple, come da sua tradizione, ha mantenuto il massimo silenzio riguardo alliPad: lannuncio al pubblico coinciso con la presentazione del prodotto. Si dunque reso indispensabile laggiornamento ai linguaggi di programmazione e alle caratteristiche della piattaforma.
1.2 iPad
iPad un tablet computer in grado di riprodurre contenuti multimediali e di navigare su Internet ed dotato di uno schermo da 9,7 pollici con retro illuminazione a LED; un dispositivo a met strada tra un telefono cellulare evoluto e un computer portatile, senza tastiera e basato su uninterfaccia multi-touch 5
CAPITOLO 1.
STUDIO DI CREATIVITA
sviluppata espressamente per il dispositivo. Un alternativa ai netbook in commercio dotati di un hardware non ottimizzato per svolgere compiti complessi, di schermi e tastiere troppo piccole per essere comode e di unautonomia limitata della batteria. iPad basato sul sistema operativo iOS, che possiede caratteristiche uniche in grado di influenzare lesperienza multi sensoriale degli utenti di tutte le applicazioni che girano su di esso, comprese quelle web. Il display di iPad il cuore dellesperienza. Lutente non solo gode di testi, grafica e media ad alta risoluzione, ma interagisce fisicamente con lo schermo Multi-Touch per guidare la sua esperienza. Le dimensioni del display di iPad sono di 768 x 1024 pixels in modalit portrait, (verticale) e 1024 x 768 pixels in modalit landscape, (orizzontale). La possibilit di usufruire di due modalit di visione distinte resa possibile grazie ad un sensore di movimento o accelerometro al suo interno. Laccelerometro uno strumento in grado di rilevare lorientamento del tablet e di regolare il display di conseguenza. Grazie allaccelerometro iPad d lidea di poterlo utilizzare in qualsiasi posizione si desideri, di non avere preferenze di orientamento e quindi anche di assoluta libert dazione.
Figura 1.1: Interfaccia iPad nelle due modalit di visione
CAPITOLO 1.
Molte delle applicazioni che riguardano magazine multimediali vengono pensate e sviluppate per sostenere entrambe le modalit (anche se questa scelta aumenta notevolmente la carica di complessit progettuale), spesso per migliorare la comodit di lettura degli articoli e per accrescere il coinvolgimento verso di essi. Per lutilizzo del multi-touch, gli utenti compiono movimenti specifici con le dita, otto differenti tipologie di gesto che variano in base alla domanda e al contesto. Di seguito sono elencate le attuali modalit di interazione gestuale con lo schermo previste dai dispositivi con sistema operativo iOS: toccare(tap): per premere o selezionare un elemento (analogo ad un singolo click del mouse). trascinare(drag): per far scorrere le pagine o trascinare un elemento. colpo(flick): per scorrere velocemente. strisciare (swipe): per individuare il pulsante elimina in una tabella. doppio colpo(double tap): per ingrandire un blocco di contenuto o di unimmagine (funziona anche al contrario). pizzicotto aperto(pinch open): per ingrandire. pizzicotto chiuso(pinch close): per rimpicciolire. toccare e tener premuto(touch and hold): nel testo modificabile, per visualizzare un ingrandimento per il posizionamento del cursore. Lapplicazione web del magazine multimediale prevede per il suo corretto funzionamento lutilizzo dei gesti tap, che ha la funzione di un click del mouse per usufruire di collegamenti interni ed esterni e drag, per scorrere le pagine delle interviste e gli articoli allinterno di ognuna con le dita. La reazione del dispositivo ai comandi Tap e Drag stata sviluppata ed ottenuta con lutilizzo di specifici codici JavaScript e jQuery (intesa come la libreria di funzioni o software framework di JavaScript, che si propone come obiettivo quello di semplificare la programmazione), inseriti nelle pagine HTML, i quali muovono i contenuti delle singole pagine nelle varie direzioni.
CAPITOLO 1.
1.3 Il linguaggio
Una applicazione, e pi in generale una pagina web formata fondamentalmente da due elementi: i contenuti veri e propri e la formattazione, ovvero laspetto con cui i contenuti sono mostrati allutente. Il linguaggio di markup HTML (HyperText Markup Language) si occupa di gestire i contenuti associandone o specificandone allo stesso tempo la struttura grafica (layout) allinterno della pagina web da realizzare grazie allutilizzo di tag diversi. Ogni tag (ad esempio <h1> o <p>) specifica un diverso ruolo dei contenuti che esso contrassegna. Il linguaggio HTML, di pubblico dominio, possiede una sintassi specifica, stabilita dal World Wide Web Consortium (anche chiamato W3C, sviluppa tecnologie che garantiscono linteroperabilit per portare il World Wide Web al massimo del suo potenziale agendo da forum di informazioni, comunicazioni e attivit comuni). Il CSS (Cascading Style Sheets o Fogli di stile) il linguaggio associato ad HTML ma da esso fisicamente distaccato, che si occupa di definire la formattazione dei contenuti. Le regole per comporre il CSS sono contenute in un insieme di direttive emanate a partire dal 1996 sempre dal W3C. Lintroduzione del CSS si resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione pi chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti. Linserimento di codice CSS nelle pagine web pu essere effettuato in tre modi: Inserendo nel tag <head> della pagina in codice HTML un collegamento ad un foglio di stile esterno, cio un file contrassegnato dallestensione .css, tramite il tag link o tramite la direttiva import, che pu essere utilizzata anche negli stessi file .css per collegare pi file tra loro:
<link rel=stylesheet type=text/css href=foglio_di_stile.css/>
oppure:
<style type=text/css> @import url(foglio_di_stile.css); </style>
CAPITOLO 1.
1.3.1
HTML5
LHTML5 si propone come evoluzione dellattuale HTML 4.01, concepito in alternativa allormai fallito XHTML 2. Attualmente in fase di completamento, il W3C ha annunciato che sar completato entro luglio 2014. Lintento specifico quello di proporre nuovi comandi e funzionalit fino ad ora ottenute in maniera non-standard, ossia mediante il ricorso a plug-in o a estensioni proprietarie dei vari browser. Altro obiettivo garantire una buona compatibilit con i browser esistenti, compresi quelli obsoleti o presenti su piattaforme mobili. Le principali novit introdotte dallHTML5 rispetto allHTML 4 sono finalizzate soprattutto a migliorare il disaccoppiamento tra struttura, definita dal markup, caratteristiche di resa (tipo di carattere, colori, eccetera), definite dalle direttive di stile CSS3, e contenuti di una pagina web, definiti dal testo vero e proprio. Inoltre lHTML5 prevede il supporto per la memorizzazione locale di grosse quantit di dati scaricati dal browser, per consentire lutilizzo di applicazioni basate su web anche in assenza di collegamento a Internet. In particolare HTML5 contiene caratteristiche fisiche della pagina che differiscono in molti punti dalle precedenti versioni.
Figura 1.2: Logo di HTML5
CAPITOLO 1.
10
La prima cosa che si nota durante lo studio di un documento HTML5 il DOCTYPE, lo strumento per definire gli elementi leciti allinterno del documento. Non si possono infatti, usare altri elementi se non quelli definiti. Una specie di vocabolario per i file che lo useranno. In HTML5 troviamo: 1 <! DOCTYPE html> anzich:
1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd>
Dunque la scelta di prendere in considerazione un doctype generico senza specifiche particolari, piacevolmente piccolo e significativo e in grado di essere ricordato a memoria senza il bisogno di essere copiato ed incollato da altri documenti. Andando avanti si nota la presenza di elementi aggiuntivi rispetto alle scorse versioni del linguaggio, come i nuovi <tag>, ovvero gli elementi che indicano la struttura del documento HTML. Essi saltano fuori e catturano lattenzione con nuove nomenclature che facilitano la scrittura del codice di formattazione. Vengono presentati tutta una serie di elementi strutturali come ad esempio <header> o <footer> e altri come <canvas> o <audio> che offrono la libert di creare contenuti pi user-friendly. Ecco i pi significativi: . <header> Header lelemento dintestazione che contiene informazioni introduttive ad una sezione o ad una pagina. Pu coinvolgere dalle normali intestazioni del documento fino ad una intero indice. Lelemento di intestazione rappresenta un gruppo di aiuti di introduzione. . <nav> Lelemento nav riservato ad una sezione del documento che contiene link ad altre pagine o ad altri settori. Non tutti i link devono essere contenuti in nav, giusto quelli che consistono nei grandi blocchi della navigazione principale. Il nav rappresenta la sezione di una pagina che si collega ad altre pagine o a parti allinterno della pagina.
CAPITOLO 1. . <section>
11
Lelemento section rappresenta un documento generico o la sezione di un applicazione. Si comporta pi o meno allo stesso modo di un <div> per la separazione di parti di documento. . <article> Lelemento article rappresenta una porzione di una pagina che pu starsene da sola come un post sul blog, una voce del forum, un commento o qualsiasi altro elemento indipendente dal contenuto. . <aside> Aside rappresenta il contenuto correlato alla main zone del documento. Di solito espresso in barre laterali, contiene elementi come messaggi correlati o tags. . <adress> Adress contiene gli elementi informativi del documento o del suo creatore, come i contatti, link a spazi sociali ecc... . <hgroup> Si tratta di un tag meraviglioso utilizzato per raggruppare i tag dintestazione <h#>. Ricordando che i tag dintestazione vanno dal tag <h1> al tag <h6> rispettivamente il livello massimo e il minimo dintestazione. . <figure> Questo tag viene usato per racchiudere alcuni contenuti come loghi, payoff o altro in una didascalia. . <footer> Lelemento footer viene utilizzato per marcare il pi di pagina, non solo per lintera pagina corrente, ma per ogni sezione che essa contiene.
CAPITOLO 1.
12
Lelemento relativo alla sezione pi di pagina contiene tipicamente informazioni circa la sua sezione, come chi lha scritto, link a documenti correlati, i dati di copyright, e cos via. Somiglia per molti aspetti allelemento article che per, pu essere posizionato anche in zone diverse del documento. Quando si guarda questi elementi si ha limpressione che si tratti semplicemente di sostituire il comune <div>, ovvero lelemento che seziona la pagina e la divide in contenitori. In realt essi sono utilissimi per portare ordine e donare un aspetto semantico al codice HTML. Header e footer ad esempio, non sono solo utilizzati allo scopo di rappresentare la parte superiore ed inferiore del documento ma anche di ogni sua singola sezione. Inoltre talvolta, per suddividere ulteriormente si ritorna allutilizzo di <div> in aggiunta.
Figura 1.3: Rappresentazione documento suddiviso con i nuovi tag
Il vantaggio di usare questi nuovi elementi dovuto principalmente al fatto che essi sono estremamente ben definiti e forniscono un ottimo modo per strutturare semanticamente il documento. Tuttavia hanno bisogno di essere utilizzati con estrema attenzione per non incappare in errori.
CAPITOLO 1.
13
1.3.2
CSS3
Le specifiche di CSS3 come per HTLM5, non sono state ancora concluse, sebbene il W3C pubblichi costantemente informazioni sulle novit in fase di sviluppo. Le novit di CSS3 pubblicate fino ad ora, presentano soluzioni per la correzione di alcuni bug di interpretazione di Internet Explorer, migliorie nella gestione degli sfondi e una soluzione per realizzare i bordi arrotondati, il border-radius. In particolare la nuova funzionalit RGBA per limpostazione del colore stata tra le pi utilizzate per la realizzazione del progetto magazine interattivo. La lettera A unita alla sigla RGB (che sta per Red, Green, Blue) sta a significare Alpha. Infatti questa funzionalit permette di specificare il valore di opacit di un determinato colore. Altra novit molto interessante, che libera dalla necessit di usare programmi di foto ritocco come photoshop, lombreggiatura del testo chiamata appunto text-shadow. Infine la pi importante tra le innovazioni proposte fino ad ora risponde ad una necessit specifica propria dei supporti mobile, tra i quali anche iPad, che riguarda le specifiche di formattazione a seconda dellorientamento dellapparecchio. La cos chiamata orientation media query, ci permette di specificare degli stili basati anche sullorientamento del dispositivo. Le due modalit di visione portrait e landscape, necessitano infatti di due specifiche tipologie di layout vista la diversit di proporzione tra di esse. Allinterno del foglio di stile si pu specificare la orientation media query che si rivolger ad un tipo di supporto e orientamento cos scrivendo:
* Portrait */ @media screen and (orientation:portrait) { /* Portrait styles */ } /* Landscape */ @media screen and (orientation:landscape) { /* Landscape styles */ }
CAPITOLO 1.
14
1.4 Targeting
La ricerca degli utenti attraverso unoperazione di targeting (che in questo caso specifico stata effettuata in modo del tutto teorico vista la complessit delloperazione in s) il primo, nonch uno dei pi importanti step per la realizzazione dellapplicazione. I contenuti della rivista trattano argomenti che riguardano specificatamente lambito professionale del web management e dei digital media, dunque scegliere un modello di target identificativo permetter di indicare le caratteristiche delle singole persone interessate al magazine; tutto questo teorizzando importanti informazioni come et, lavoro, influenze, frustrazioni, obiettivi ecc... Inoltre che cosa viene prima, lidea o lapparecchio? Lapplicazione o iPad? In fase di brainstorming e di ricerca di idee, occorre fare un passo indietro e considerare le persone che vivranno lesperienza dellapplicazione e dei suoi contenuti. Idealmente il target ideale include noi stessi, ma quando il nostro parere viene usato come motivo per decidere, questo potrebbe portare a perdere molte opportunit di arricchimento del nostro prodotto, oltre che la nostra immaginazione. Limportanza della ricerca di targeting dovuta al fatto che il pubblico di de
CAPITOLO 1.
15
stinazione pu essere molto diverso da quel che si pensa o si potrebbe scoprire che il nostro prodotto manca di caratteristiche importanti. Le domande alle quali andare incontro e dare una risposta sono: Chi sono? Dove vivono, lavorano, giocano? Quali sfide devono affrontare? Dare loro unet, un lavoro, una famiglia, ecc... Progettare per una fascia dutenza gi definita fondamentale innanzitutto per direzionare molti degli aspetti di progettazione, a cominciare dalle scelte grafiche (scelta dei temi, fonts e colori) fino a capire la migliore strutturazione dei contenuti allinterno delle singole pagine. Inoltre perfezionare le debolezze in modo rapido e sviluppare idee per un prodotto che soddisfi le esigenze del pubblico di destinazione. Dopo una prima analisi costituita dall identificazione in linea generica di sei tipologie di target scelte tra tutti i potenziali lettori della rivista e caratterizzate da et, occupazione, conoscenze, livello culturale e obiettivi, questi ultimi sono successivamente stati ridotti a tre. Si operato poi, per un filtraggio ulteriore scegliendo il modello ritenuto pi interessato alla rivista e verso il quale rivolgere lo studio e lanalisi di progettazione. Di seguito una prima definizione di target realizzata in Xmind, del quale parleremo pi avanti, seguita dai profili definitivi estrapolati da essa ed elencati in ordine di importanza:
Figura 1.4: Analisi del targeting effettuata in Xmind
CAPITOLO 1.
16
MODELLO 4 Ha dai 25 ai 30 anni, sta finendo il suo corso di laurea che riguarda lambito del web e dei digital media ed ha intenzione di continuare per questa direzione iscrivendosi ad una laurea specialistica o ad un master. Ha un buon livello culturale e sufficienti conoscenze del dominio che in futuro vuole trasformare in doti lavorative ma ancora non ha le idee chiare su che cosa fare nello specifico. Lo affascinano le carriere dai risvolti pi diversi, da quelle che effettuano ricerca in campi ancora inesplorati a quelle che fanno girare il mondo, sempre alla ricerca di nuove esperienze digitali. E il target pi vicino a questo progetto, il lettore al quale si intende indirizzare direttamente il magazine. MODELLO 5 Ha oltre 30 anni e si gi lanciato nella carriera lavorativa, proprio in ambito web management e digital media, arrivando ad ottimi risultati soddisfacenti. Ha un livello culturale medio/alto e ovviamente ottime conoscenze del dominio grazie allesperienza lavorativa nel settore e agli studi universitari specifici dellambito prima di essa. Ci che lo caratterizza il suo continuo interessamento verso nuove proposte e nuovi scenari digitali che approfondiscono e perfezionano il suo metodo lavorativo. D grande importanza al confronto interpersonale e allo scambio di conoscenze. La rivista pu interessarlo per questi motivi. MODELLO 1/3 Pu avere dai 20 ai 30 anni, frequenta luniversit ma in ambito completamente differente a quello del web management e dei digital media. Ha una buona cultura generale ma non possiede conoscenze del dominio e degli argomenti trattati nella rivista. Ci che lo spinge a leggere il magazine la curiosit verso luniverso web, cos attuale al giorno doggi. Il suo obiettivo quello di avere conoscenze generiche a riguardo, di non risultare ignorante verso largomento.
CAPITOLO 1.
17
La teorizzazione dei modelli di utenza ha evidenziato le linee guida su cui muoversi per la realizzazione del magazine. I target ipotizzati sono, anche se in quantit e per motivi diversi, attratti dal tema. Al vertice della classifica dinteressamento, si trova il modello 4, riconosciuto come target definitivo per le sue attitudini che pi degli altri vanno verso i principi e gli obiettivi di base del magazine. Questo target suggerisce che la curiosit e linteresse sono i sentimenti prevalenti. Il filone narrativo e la navigazione, dovranno dunque concentrarsi a comunicare fascino ed intrigo verso questargomento che risulta fin troppo sfaccettato per essere compreso a pieno. Inoltre il messaggio continuo e rassicurante che rimandi al tutto possibile e al non mai troppo tardi. Non pu mancare una grande dose di dinamismo, data let medio/bassa del lettore, nonch lusabilit, caratteristica principale in campo del web. Infine sulla base della conoscenza del dominio da parte dellutente, i contenuti dovranno presentarsi relativamente specifici ma, allo stesso tempo, semplici da interpretare per invitare alla lettura.
1.5 Analisi dei prodotti esistenti

Oltre alle singole esigenze dellutente emerse dalla fase di targeting inoltre necessario capire in che modo queste esigenze sono attualmente soddisfatte dal mercato delle applicazioni. Unapprofondita analisi dei magazine multimediali per supporto iPad esistenti in grado, attraverso valutazioni e analisi di fornire una visione olistica complessiva ed aiutare durante tutte le fasi del processo di realizzazione. A questo scopo sono stati analizzati magazine come: Pulse, Blancspot, Flipboard, Zinio, FLUD, Empire, Wired. A differenza dellapplicazione web di questo progetto di tesi, i magazine sopra elencati provengono dal mondo dellApple Store; necessitano dunque di essere comprati nel negozio online per essere visualizzati. Tuttavia trattandosi in definitiva anchesse di riviste interattive, anche se su alcune caratteristiche di strutturazione differiscono fortemente, esse meritano unattenta analisi concettuale e strutturale.
CAPITOLO 1.
18
Vincitore del Apple Design Award 2011, Pulse News unapplicazione solida, visivamente piacevole anche sugli schermi pi piccoli, dai contenuti molto ben organizzati, rende la lettura delle notizie divertente e coinvolgente. La magazine app prende i siti web preferiti e li trasforma in un mosaico colorato ed interattivo. Basta toccare sulla thumbnail dellarticolo per averne una visione elegante e pulita. E possibile la condivisione di una notizia attraverso canali di share come facebook, twitter o via mail. La grafica riprende colori scuri e freddi.
Figura 1.5: Logo di Pulse News
Blancspot un servizio di notizie interattivo, anchesso ben ordinato negli spazi che utilizza. Una dashboard, spazio di visione complessiva, compare tramite unicona. Altrimenti il magazine si sviluppa attraverso lo scorrimento delle pagine per orizzontale, passando dalle headlines fino alle notizie di sport. Una pecca dellapplicazione sta nellimpossibilit della visione verticale o portrait.
Figura 1.6: Logo di Blancspot News
CAPITOLO 1.
19
Altra applicazione di grandissimo successo gi dal 2010, Flipboard un modo bello e veloce di sfogliare notizie, foto e aggiornamenti degli amici su facebook. Tutti i social media sono infatti presentati sotto forma di una rivista facile da leggere e divertente da esplorare. Aggiornata continuamente da altri elementi di condivisione, Flipboard presenta anche le pubblicazioni di National Geographic, The New Yorker, Wired, Rolling Stone, Oprah, Forbes, Robert Scoble e Maria Popova di Brain Picking. Le sezioni di Flipboard sono inoltre, personalizzabili.
Figura 1.7: Logo di Flipboard
Zinio unapplicazione pensata per facilitare la lettura delle riviste preferite dellutente. Si presenta infatti come un contenitore di magazines. Permette di accedere a migliaia di titoli, decine di migliaia di problemi, e milioni di pagine di migliori contenuti digitali del mondo tutte da esplorare. Grandi titoli di giornali, fotografie, notizie e approfondimenti, dalle pagine di Rolling Stone, Esquire, Maxim, Elle, e decine di altri.
Figura 1.8: Logo di Zinio
CAPITOLO 1.
20
Pensato per permettere allutente di essere sempre aggiornato su notizie e blog, FLUD un lettore di notizie mobile e adattabile ai suoi gusti. Dal design e dallinterfaccia accattivante, Flud uno dei top 3 delle applicazioni magazine su Apple Store.
Figura 1.9: Logo di FLUD News
Le applicazioni qui analizzate per definire lorientamento dei magazines interattivi, non rappresentano una vera e propria concorrenza sul mercato in quanto, come detto a differenza del progetto presentato in questo elaborato, non fanno parte della categoria delle web applications. Tuttavia lo studio dei contenuti, della strutturazione e dellinterfaccia grafica sono stati fondamentali per definire la linea progettuale migliore da intraprendere.
Capitolo 2
Content management
2.1 Brainstorming
Dopo aver condotto la ricerca sugli utenti e lanalisi della concorrenza si in grado di incominciare la fase di programmazione dellapplicazione. La maggior parte delle applicazioni pu beneficiare di schizzi e di prototipi prima della progettazione. Disegnare e prototipare pu dare lopportunit di ripensare ad alcune delle scelte di design prima di implementare la codifica. Armati dei risultati di ricerca (utenti, scenari, analisi di concorrenza) saremo ben attrezzati per iniziare il brainstorming e abbozzare i concetti della web application. 21
CAPITOLO 2.
CONTENT MANAGEMENT
22
Il brainstorming (semanticamente tempesta di idee) una tecnica di creativit di gruppo per far emergere idee volte alla risoluzione di un problema. Sinteticamente consiste, dato un problema, nel proporre ciascuno liberamente soluzioni di ogni tipo (anche strampalate o con poco senso apparente) senza che nessuna di esse venga minimamente censurata. La critica ed eventuale selezione interverr solo in un secondo tempo, quando la seduta di brainstorming finita. Il risultato principale di una sessione di brainstorming, che apparentemente sembra un metodo sciocco e quasi infantile, invece in genere molto produttivo: pu consistere in una nuova e completa soluzione del problema, in una lista di idee per un approccio ad una soluzione successiva, o in una lista di idee che si trasformeranno nella stesura di un programma di lavoro per trovare in seguito una soluzione. Nel caso specifico di questo progetto, il candidato ha svolto questa operazione in solitario, proponendo soluzioni di qualsiasi tipo ai relatori, i quali sono intervenuti soltanto nella seconda fase del brainstorming, quella della critica e della selezione delle idee pi interessanti. Prima di iniziare occorrere trascorrere del tempo per la creazione di un ambiente adatto per il lavoro. Lideale sarebbe una sala conferenze o una grande parete. Uno spazio dove poter attaccare le varie bozze e proposte e potersi muovere liberamente. Inoltre un grande spazio consentir a chi guarda la parete a fare un passo indietro per vedere i disegni nellinsieme e di fotografare il progetto nella sua interezza e di inviarlo ogni qual volta vengono effettuate modifiche. Mentre a colpo docchio un brainstorming pu sembrare una semplice operazione, in realt in genere, richiede una grande collaborazione e una rigida metodologia. Uno dei pi grandi errori non dedicare abbastanza tempo per la pratica del brainstorming. Allo stesso tempo, con sedute troppo lunghe si pu perdere la concentrazione. Di seguito alcune norme principali alla base di una soddisfacente seduta di brainstorming: -non evitare la critica -incoraggiare le idee selvagge -andare per la quantit -combinare o migliorare le idee altrui Dopo la sessione di brainstorming si dovrebbe spendere un po di tempo per espandere e riordinare le idee, cercando di resistere alla tentazione di abbandonare gli schizzi cartacei a favore di strumenti informatici. Alcuni vantaggi del partire con i bozzetti disegnati a mano, includono la
CAPITOLO 2.
CONTENT MANAGEMENT
23
capacit di pensare in grande, di abbattere i confini e di migliorare la collaborazione tra i membri del team. Gli schizzi, infatti sono oggetti sociali. Essi invitano gli altri a commentarli dal momento che appaiono poco rifiniti e aperti alle critiche. Gli schizzi non devono essere opere darte dal momento che sono soprattutto un pensiero ed uno strumento di collaborazione. Al termine di tutte le sessioni della seduta si defiler un quadro generale delle idee analizzate e selezionate. Le proposte progettuali si uniranno a quelle grafiche dellinterfaccia, mescolandosi in uno scenario apparentemente indecifrabile e confuso ma dal quale emergeranno una moltitudine di proposte differentemente applicabili, una base solida dalla quale iniziare la progettazione vera e propria dellapplicazione web.
2.2 Scelta dei protagonisti

A seguito dello studio sulle possibili metodologie di progettazione risultate dal brainstorming, occorre a questo punto, prendere in considerazione i contenuti che dovranno essere inseriti nel magazine interattivo, ovvero tutto ci che sta dietro linterfaccia. I contenuti hanno infatti il compito di giustificare tutto il lavoro effettuato fino a questo momento, di progettazione e di scelta del target. Per lamministrazione dei contenuti stato utilizzato Xmind, software open source per il brainstorming, la strutturalizzazione e la gestione delle mappe mentali o concettuali. Questo strumento supporta le mappe mentali, le mappe concettuali, i diagrammi a lisca di pesce (diagrammi di Ishikawa), diagrammi ad albero, organigrammi, tabelle logiche e fogli di calcolo. E stato gi definito come gli argomenti contenuti nel magazine riguardino una serie di articoli realizzati riguardo un determinato numero di personaggi che, partendo dal Master in Multimedia Content Design e successivamente lavorando per grandi aziende in tutta Italia, hanno specializzato le loro conoscenze nel filone accomunante del web management. Analizzando il sito web del Master allindirizzo: http://www.mmm.unifi.it/ sono state studiate le interviste ivi contenute, effettuate agli ex studenti, filtrandone le argomentazioni ed estrapolando le esperienze ed i percorsi formativi che pi rispondevano alle esigenze del magazine interattivo.
CAPITOLO 2.
CONTENT MANAGEMENT
24
Figura 2.1: Brainstorming
CAPITOLO 2.
CONTENT MANAGEMENT
25
La scelta si focalizzata su sette nomi di sette personaggi che si sono distinti da tutti gli altri per conoscenze del dominio allinterno del web management, per esperienze personali e professionali in aziende leader nel settore e idee innovative spesso premiate dalla critica. Il compito di ognuno allinterno della rivista quello di raccontare, attraverso uno spazio loro dedicato sviluppato su pi punti, il loro percorso formativo allo scopo di invogliare e affascinare coloro i quali hanno intenzione di immergersi in questo ambiente cos ricco di stimoli ed opportunit, o pi semplicemente di interessarsi alle sue evoluzioni. I nomi dei candidati scelti per essere inseriti nellapplicazione web per descrivere i propri percorsi, esperienze, gusti personali e attivit sono quelli di: Daniele Novaga Web designer & SEO freelance, nonch co-fondatore di Stereo Mood. Front-end developer e SEO per MTV.it e Nickelodeon, ha collaborato con Nokia Play, San Miguel, Housegrafik, The blog Tv e Techmex. La sua idea di aggregare la musica dei blog su base emozionale ha raccolto intorno a Stereo Mood una community di 100.000 fans da tutto il mondo, che dalla primavera del 2009 in costante espansione. Daniele ha ricevuto il diploma del Master durante ledizione 2005-2006.
CAPITOLO 2.
CONTENT MANAGEMENT
26
Ilaria Salvalaggio Marketing Operations Manager presso Register.it, ha cominciato a muoversi nel mondo dei new media interessandosi di Architettura dellInformazione, Accessibilit e Usabilit web, per poi allargare gli orizzonti sviluppando conoscenze e competenze in ambito Marketing, Comunicazione e Project management. Geek Girl e fotografa della domenica, vive in Rete oltre a lavorarci. Ilaria ha ricevuto il diploma del Master durante ledizione 2005-2006. Umberto Tesoro Online Marketing Manager presso Education First, ha vissuto a Bologna, Londra e New York, lavorando per YOOX e Idealist. Ha inoltre partecipato alla start up di MySpace.com, in qualit di primo italiano assunto in assoluto, ha preparato il terreno per il lancio della versione per il nostro paese. Umberto ha conseguito il diploma del Master durante ledizione 2003-2004. Rosario Sterrantino Account/PM/Team Manager Application/Technical Sale presso la ContactLab di Milano, ha unesperienza pluriennale nel campo della comunicazione digitale. Ha lavorato per clienti del calibro di Fiat, Disney, Levis, Diesel, Luxottica, Ebay Italia e molti altri. Rosario ha ricevuto il diploma del Master durante ledizione 2004-2005.
CAPITOLO 2.
CONTENT MANAGEMENT
27
Silvia Cappelli Silvia Cappelli, laureata in Lingue e Letterature Straniere Moderne, lavora come responsabile PR & Online Communication presso la divisione cargo di SWISS a Zurigo. Silvia ha ricevuto il suo diploma del Master durante ledizione 1999-2000. Karim Ben Hamida Digital Product Marketing Manager presso Populis, opera da diversi anni nel campo dei digital media, occupandosi di brand strategy, comunicazione, marketing e product design. Ha lavorato per De Agostini Editore, Mondadori, il Ministero per i Beni Culturali e la nota Scuola Normale Superiore di Pisa. Karim ha ricevuto il diploma del Master durante ledizione 2001-2002. Anna Silvia Bernotti web innovator in IBM per lEuropa Southwest, da anni si occupa di comunicazione nei new media per la multinazionale americana. E stata Internal communications manager per lEuropa Southwest, ha lavorato alla migrazione dei molteplici siti intranet europei verso il portale unico On Demand Workplace e si occupata di education sullutilizzo dei social media per il personale di comunicazione e di business, internamente e esternamente a IBM in Southwest. Anna Silvia ha ricevuto il diploma del Master durante ledizione 1999-2000.
CAPITOLO 2.
CONTENT MANAGEMENT
28
Figura 2.2: Schema dei candidati
CAPITOLO 2.
CONTENT MANAGEMENT
29
2.3 Categorizzazione
Dopo essere stati scelti tra altri candidati, i sette personaggi ritenuti pi appropriati per figurare nel magazine interattivo, sono stati analizzati nei contenuti riportati nelle interviste del sito del master in multimedia content design, e sottoposti ad unattenta categorizzazione che evidenziasse le loro peculiarit, le loro inclinazioni e li inserisse sotto tematiche comuni. Gli elementi inseriti dentro specifici gruppi di insiemi hanno permesso una visualizzazione complessiva esplicativa delle loro personalit, dei loro interessi e delle differenze tra di essi. Le attivit di categorizzazione hanno interessato in particolare gli step che li hanno portati ad essere protagonisti del mondo web. Il web management infatti il filone narrativo a tutta la rivista, ci che accomuna tutti i protagonisti selezionati, anche se ognuno di loro ne analizza una singola sfaccettatura ottenendone risultati sempre diversi. Nello specifico le informazioni riguardanti i personaggi sono state categorizzate sotto tipologie di insiemi che sono state successivamente sintetizzate arrivando a quattro. Percorso formativo: ovvero le esperienze educative universitarie e aziendali. Incominciando dalla laurea di primo livello e ovviamente il diploma del master, si specificano le successive fasi che hanno portato ogni personaggio a diventare quello che oggi. Ruolo professionale: ovvero le mansioni, le competenze e le responsabilit ricoperte ad oggi nellazienda per la quale lavorano. E lo step che succede al percorso formativo. Attivit e servizi: ci che di specifica competenza del protagonista. Esso in grado si svolgere determinati compiti e di offrire determinati servizi allazienda o alla clientela per conto dellazienda. Curiosit: lunico insieme di attivit non direttamente riconducibile allambito professionale del web management o dei digital media. Esso riguarda tutti quegli interessi extra che fanno parte della vita del protagonista. Di queste attivit possono far parte lo sport, la musica, la fotografia ecc..
CAPITOLO 2.
CONTENT MANAGEMENT
30
Le attivit di categorizzazione hanno il compito di impostare il racconto di ognuno secondo uno schema strutturale che si ripete nella forma. Altro elemento che scaturisce da questanalisi la possibilit di evidenziare i punti comuni tra i personaggi del magazine, permettendo linserimento di appositi link interni che in seguito verranno chiamati related. Ogni sezione permette cos, tramite lelemento related, la comparazione alla sezione ad unaltro racconto. Il lettore in grado di seguire tutte le fasi del percorso e le varie sfaccettature con le quali si presenta largomento del web management, accomunando una storia allaltra.
Figura 2.3: Collegamenti tra i protagonisti
CAPITOLO 2.
CONTENT MANAGEMENT
31
Figura 2.4: Schema di categorizzazione
Capitolo 3
Information Architecture
Larchitettura dellinformazione la metodologia organizzativa logica e semantica della struttura dellapplicazione a seguito dellanalisi delle informazioni, dei contenuti, dei processi e delle funzionalit. Unattivit di Architettura dellInformazione si divide solitamente in due step: il primo prevede venga adottata una metodologia top-down, e in un secondo momento un approccio bottom-up. In genere, la valutazione top-down eseguita per prima. Come suggerisce il nome, questo approccio permette di avere una visione dinsieme e di lavorare approfondendo progressivamente i dettagli relativi alla distribuzione, al flusso di pagine, o alla struttura del contenuto. Il modo in cui verr strutturato tramite lapproccio top-down potr rendere il contenuto pi navigabile. A questa prima fase segue lattivit bottom-up. Questa permette allarchitetto dellinformazione di afferrare le unit minime, i piccoli pezzi che fanno funzionare il tutto (i cosiddetti metadati) e tutte le cose che coinvolgono i metadati: cosa deve essere fatto e cosa deve essere registrato, come pubblicarlo, e come interagiscono fra loro i diversi metadati.
3.1 Struttura di navigazione

Il primo step da affrontare dunque la strutturazione del magazine. Per struttura del magazine si intende la forma gerarchica che assumono le sue pagine ed i suoi collegamenti ipertestuali a partire dalla home page o in questo caso specifico, dalla copertina o cover. La struttura di navigazione organizza i contenuti da presentare su pi livelli e pu avere varie ampiezze e profondit. Si tratta dunque di impostare una visione collettiva del magazine in tutte le sue parti e i suoi collegamenti allinterno di essa attraverso luso di diagrammi come la flow chart della quale ci occuperemo in seguito. 32
CAPITOLO 3.
INFORMATION ARCHITECTURE
33
Non si tratta ancora di dare uninterfaccia grafica bella e accattivante ma prima di delineare la forma basandosi sui contenuti risultanti tutti i precedenti studi. A questo punto pu risultare utile lanalisi dei prodotti esistenti e le concezioni nate dalla seduta di braistorming. I principi che permettono di usufruire di talune strutture piuttosto di altre e note a chiunque si dedichi alla progettazione in ambito web e specialmente mobile, devono considerare gli importanti concetti noti nellinteraction design (progettazione dellinterazione uomo-macchina) di usabilit, accessibilit e costumizzazione, sui quali necessario basare larchitettura dellinformazione dellintero progetto. Lusabilit definita come come lefficacia, lefficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti. In pratica definisce il grado di facilit e soddisfazione con cui linterazione uomo-strumento si compie. Il termine non si riferisce a una caratteristica intrinseca dello strumento, quanto al processo di interazione tra classi di utenti, prodotto e finalit. Il modello del progettista deve avere tra le sue caratteristiche quella di coincidere, o per lo meno somigliare il pi possibile, al modello del potenziale utente finale che stato definito nella seduta di targeting. Le principali caratteristiche di un sistema usabile sono lefficacia, ovvero laccuratezza e completezza con cui certi utenti possono raggiungere certi obiettivi in ambienti particolari, lefficienza, ovvero le risorse spese in relazione allaccuratezza e completezza degli obiettivi raggiunti, la soddisfazione, ovvero il comfort e laccettabilit del sistema di lavoro per i suoi utenti e le altre persone influenzate dal suo uso e infine la facilit di apprendimento e di memorizzazione. Laccessibilit la caratteristica di un dispositivo, di un servizio o di una risorsa dessere fruibile con facilit da una qualsiasi tipologia dutente. Il termine comunemente associato alla possibilit anche per persone con ridotta o impedita capacit sensoriale, di fruire dei sistemi informatici e delle risorse a disposizione. Rispettare i concetti di accessibilit significa utilizzare un codice o una struttura semanticamente corretta, utilizzare testi chiari, fluenti e facilmente comprensibili, utilizzare testi alternativi per ogni tipo di contenuto multimediale, sfruttare titoli e link che siano sensati anche al di fuori del loro contesto e inoltre avere una disposizione coerente e lineare dei contenuti e dellinterfaccia grafica. Customizzazione infine, significa concedere un certo grado di libert allutente riguardo a presentazione, navigazione e contenuto degli elementi.
CAPITOLO 3.
34
Figura 3.1: Struttura di navigazione
CAPITOLO 3.
35
E stato deciso in definitiva che il progetto si dovr suddivide partendo dalla cover, la prima pagina che appare allavvio dellapplicazione e che permane finch questultima non ha caricato tutti i suoi contenuti testuali e multimediali. Successivamente a questa, si passa alle pagine di presentazione dei personaggi che avranno il compito di anticipare lo specifico argomento allinterno del web management, affrontato nella storia. Di norma i magazine cartacei ma anche quelli interattivi, posseggono una loro Table of Content altres chiamata indice, un elenco ordinato delle varie parti che li compongono. La scelta per questo progetto di non usufruire della Table of Content nasce da una riflessione fatta in termini di usabilit e di semplicit. Senza di essa infatti, lutente sollecitato ad usufruire dellinterazione gestuale del drag per scorrere le pagine delle storie che si succedono orizzontalmente. Inoltre si tratta delleliminazione di uno step considerato di troppo nel percorso dalla copertina alla storia stessa. Lutente si trova cos a godere della rivista in maniera pi semplice e diretta, arrivando pi velocemente al cuore delle singole pagine. Tuttavia per una questione di velocit di passaggio da una storia allaltra si pensato di realizzare un piccolo menu a scomparsa per lo scorrimento, presente in tutti i segmenti.
3.1.1
Flow chart
Il termine anglosassone flow chart (diagramma di flusso) indica una rappresentazione grafica, o diagramma, di tutti i collegamenti ipertesuali sia allinterno che allesterno della rivista web. Esso consente di descrivere in modo schematico i contenuti che si legano gli uni agli altri in una fitta rete visionabile in tutta la sua complessit. Il flow chart anchesso di forma gerarchica come la struttura di navigazione dalla quale si sviluppa successivamente. Ogni linea un collegamento da realizzare per il corretto funzionamento dellintera struttura.
CAPITOLO 3.
36
Figura 3.2: Flow chart
CAPITOLO 3.
37
3.2 Unit informativa

Approfondendo progressivamente i dettagli caratteristici del magazine, si arriva alla fase di strutturazione delle singole pagine che andranno ad essere il supporto fisico del contenuto, ovvero della storia di ogni singolo personaggio preso in esame. Si parlato durante la seduta di categorizzazione, di come le informazioni riguardanti i personaggi sono state suddivise sotto quattro tipologie di insiemi descrivendo rispettivamente: il percorso formativo, il ruolo professionale, le attivit e servizi e le curiosit. Ognuno di questi argomenti nei quali composta la storia, necessita di uno spazio dedicato, quindi di una pagina a s che tuttavia, devessere compatibile con le altre, presentando nella sua struttura punti comuni. La singola pagina della storia dovr quindi contenere elementi testuali in riferimento allo specifico argomento denominati textual contents, eventuali elementi multimediali se a disposizione come video o audio, anche chiamati rich contents, collegamenti ipertestuali che uniscono e comparano le storie, rappresentati precedentemente dal flow chart e chiamati related e infine i collegamenti ipertestuali esterni al magazine denominati external links. Come vedremo il prossimo paragrafo che sar dedicato alla preparazione di bozze grafiche, avr come riferimento la schematizzazione effettuata dallunit informativa, organizzando gli elementi qui presi in considerazione. Con lunit informativa si arriva alla conclusione della strutturazione dellintera applicazione web. Grazie ai diagrammi rappresentativi siamo adesso in grado di dare una forma al progetto, di capire come esso si sviluppa e si lega al suo interno e di affrontare la seduta di wireframe.
CAPITOLO 3.
38
Figura 3.3: Unit informativa
CAPITOLO 3.
39
3.3 Wireframe
In generale in informatica, wireframe o wire frame model (lett. modello in fil di ferro) indica un tipo di rappresentazione grafica degli oggetti eseguita manualmente o al computer. Con questo metodo vengono disegnati soltanto i bordi delloggetto, il quale di fatto resta trasparente al suo interno (sembrando, appunto, costruito con il fil di ferro). Questo metodo richiede calcoli molto pi semplici rispetto alla rappresentazione di superfici, ed quindi considerevolmente pi veloce. In web design e nella programmazione delle applicazioni, il termine sta ad indicare una bozza strutturale di un sito, applicativo web o software. I wireframe sono estremamente utili in quanto permettono di individuare subito le dinamiche del progetto in termini di usabilit, accessibilit ed utilizzo pratico, i punti critici e quelli che richiedono uno sviluppo pi accurato o miglioramenti sulle basi dellanalisi strutturale passata. La creazione dei modelli delle pagine web eseguita mediante software grafici senza il bisogno di un linguaggio di markup come HTML di supporto. Non esiste un vero e proprio standard per i wireframe, quindi possibile vederne fatti in modi pi o meno ordinati, oppure creati graficamente al computer con diagrammi di flusso, semplici rappresentazioni spaziali ed altro. Nel caso specifico del progetto di questo elaborato, la realizzazione del wireframe stata resa possibile grazie ad un software chiamato Balsamiq Mockup. Utilizzare Balamiq come disegnare su un foglio di carta ma, poich esso digitale, possibile modificarne e riorganizzarne i contenuti in modo semplice e veloce. Nei diagrammi dei paragrafi precedenti venivano assegnati ad ogni elemento della struttura di navigazione, una lettera dellalfabeto per identificarli e differenziarli tra loro durante la successiva seduta di wireframe. Ogni bozza strutturale presenter dunque in questa fase la lettera relativa in rimando alla pagina alla quale si riferisce. Nello specifico stata assegnata la lettera A per indicare la cover del magazine, B per indicare la prima pagina di ogni storia dove ci sar la presentazione del personaggio, C per indicare tutte le pagine che trattano i percorsi formativi, D per indicare tutte le pagine che trattano i ruoli professionali, E per indicare tutte le pagine che trattano le attivit ed i servizi, F per indicare tutte le pagine che trattano le curiosit riguardanti i protagonisti del magazine. Non si parla ancora di interfacce grafiche ma di indicazioni per realizzarle.
CAPITOLO 3.
40
Figura 3.4: Wireframe esteso
CAPITOLO 3.
41
Figura 3.5: Wireframe Cover
CAPITOLO 3.
42
Figura 3.6: Wireframe Character page
CAPITOLO 3.
43
Figura 3.7: Wireframe Percorso formativo
CAPITOLO 3.
44
Figura 3.8: Wireframe Ruolo professionale
CAPITOLO 3.
45
Figura 3.9: Wireframe Attivit e servizi
CAPITOLO 3.
46
Figura 3.10: Wireframe Curiosit
Capitolo 4
Graphic design
4.1 Interface design
LInterface design, letteralmente la progettazione delle interfacce, comunemente intesa come lattivit di progettazione dellinterfaccia utente di un qualsiasi software o applicazione informatica. Nel caso del web design si studia laspetto grafico finale del prodotto, affinch lo stesso possa ben apparire e catturare lattenzione dellutente che lo visita trasmettendogli precise sensazioni. Soltanto adesso si in grado di dare forma al progetto riproponendolo sotto questo punto di vista, poich tutto ci che viene sviluppato in questa sessione avviene necessariamente alla luce degli studi fatti in precedenza, nessuno escluso; per citarne alcuni, ci dipende fortemente dal target, dalla tematica trattata e cos via. La grafica che sar applicata alla struttura del magazine dovr essere in grado di fornire al target di riferimento la giusta comunicazione visiva, intesa come la trasmissione di un messaggio tramite immagini. Ci si dedicher dunque alla scelta del giusto Layout per limpaginazione del magazine che abbia caratteristiche di tipo user-friendly e graficamente ricercate. Ci pu avvenire in un primo momento con lausilio di Templates, documenti desempio che vengono messi a disposizione gratuitamente o a pagamento su siti internet, per lo sviluppo di altre pagine web con grafica e formattazione identiche ma contenuti diversi. Solitamente per questi esempi vengono utilizzati i linguaggi principali del Web, lHTML per i contenuti e il CSS per la formattazione, ma non mancano esempi in Flash. Il giusto risultato avr il compito di trasmettere, come detto in precedenza, curiosit e interesse, fascino, intrigo e dinamismo. Tutto ci con lutilizzo di sfondi, colori e caratteri. Non rimane che incominciare la sperimentazione utilizzando software grafici come Adobe Photoshop. 47
CAPITOLO 4.
GRAPHIC DESIGN
48
In generale lo human Interface Guidelines per iPad di Apple, indica in che modo ottimizzare la creazione di interfacce per applicazioni iPad. Le linee guida che sono elencate di seguito, donano una direzione precisa per il corretto sviluppo dal punto di vista del visual design. Il punto focale attorno al quale si sviluppa la panoramica delle linee guida uno: minimizzare linterfaccia utente in modo che lattenzione venga rivolta verso il contenuto, che risulter piacevole alla vista ed intuitivo, e soprattutto sfrutter appieno le capacit del dispositivo per consentire la maggior interazione possibile. -Supporto per tutti gli orientamenti: lapplicazione deve incoraggiare le persone ad interagire con iPad da ogni lato, fornendo un esperienza in tutti gli orientamenti. -Miglioramento dellinterattivit senza laggiunta di elementi inutili: le migliori app donano metodi innovativi per interagire con i contenuti senza perdere di vista il loro fine ultimo. Resistere, quindi alla sensazione di riempire lo schermo con caratteristiche che non sono direttamente legate al compito principale. -Appiattire la gerarchia delle info: anche se sbagliato inserire troppe informazioni in ununica schermata, conviene fissare il contenuto primario al centro dello schermo e fornire ulteriori informazioni in vista ausiliaria, come popover. -Ridurre al minimo le modifiche dello stile dellinterfaccia: quando alcuni passaggi portano a cambiamenti, aggiornare solo le aree dellinterfaccia che lo richiedono. Se si esegue il minor numero di cambiamenti a schermo intero dellinterfaccia, lapp avr una maggiore stabilit visiva ed aiuter lutente a non perdere di vista il percorso che ha intrapreso. -Aggiungere realismo dove possibile: quando possibile aggiungere una dimensione che sia la pi realistica e fisica possibile. Pi realistico sar laspetto ed il funzionamento dellapplicazione, pi facile sar per le persone capirla e divertirsi ad usarla. -Sfruttare le potenzialit: iPad ad alta risoluzione supporta grafiche belle ed accattivanti che rendono il compito dellapplicazione pi semplice e gratificante. -Minimizzare il percorso lineare: le applicazioni dovrebbero consentire alle persone di interagire con esse in modo non lineare. Questa modalit impedisce un approccio libero allapp, costringendo a seguire un determinato percorso pre-impostato. -Lets begin!: ogni applicazione dovrebbe incominciare il pi presto possibile in modo che le persone non debbano subire inutili preamboli o presentazioni.
CAPITOLO 4.
GRAPHIC DESIGN
49
-Lets finish!: come per quando comincia, ogni applicazione deve chiudersi istantaneamente al click del tasto Home. La prima impressione pu significare tutto. Quando si tratta di unapplicazione, la sua interfaccia la prima impressione dellutente. Se questa risulter negativa, sar difficile convincerli a provare di nuovo. Per evitare che questo accada importante spendere tempo ed energie per la raffinazione dellinterfaccia seguendo le seguenti indicazioni: -Essere accogliente: fare in modo che lutente rimanga entusiasta la prima volta che apre lapp. -Conoscere lutente: prodotti come iPad offrono lopportunit di creare unesperienza utente personalizzata includendo nome ID, preferiti, comportamento utente ecc.. -Fare in modo che i contenuti brillino: un esempio, lapplicazione di anteprima delle foto nasconde i controlli dellinterfaccia utente quando le foto sono visualizzate. -Fornire un feedback adeguato: durante lutilizzo ci possono essere momenti che impongono lattesa. Per rassicurare gli utenti durante questattesa si consideri di fornire feedback sotto forma di animazioni, transizioni o avvisi). -Minimizzare la pena: a volte le cose vanno fuori controllo come la perdita della connessione di rete ecc... In questi casi bisogna cercare di minimizzare limpatto sullesperienza utente spiegando il problema e mantenendo lutilizzatore informato.
4.1.1
Fonts
Il carattere pu influenzare come gli utenti percepiscono lintera applicazione. Ci sono da analizzare la tipologia di font (il carattere), la sua dimensione, il suo colore e il suo peso. -il font: le impostazioni di default suggeriscono il carattere Helvetica, scelto per la sua leggibilit e versatilit soprattutto nei dispositivi mobile. E ovviamente possibile ignorare queste impostazioni ma si deve fare in modo che il nuovo carattere selezionato sia opportuno per lattivit. Ad esempio un font estroso pu essere adatto per un gioco ma non per la lettura di testi lunghi, che per la maggior parte delle volte tenderanno ad usare caratteri di tipologia serif come il Times New Roman. Le tipologie serif contengono dettagli strutturali nei loro tratti che connettono le lettere e semplificano la lettura; i sans serif come Helvetica non contengono questi elementi, sono utilizzati per altri scopi
CAPITOLO 4.
GRAPHIC DESIGN
50
come per scrivere i titoli ed i sottotitoli. Se si sceglie uno specifico carattere, questo non vuol dire che tutto il testo lo debba utilizzare. C da tener presente che troppi caratteri possono causare del rumore visivo e rendere lapplicazione difficile da interpretare. Variazioni in termini di dimensione e peso possono contribuire a creare uno schema visivamente interessante. Di seguito alcuni font da prendere in considerazione: Serif: American Typewriter no italics Courier New - tutto Georgia - tutto Times New Roman - tutto Sans serif: Apple Gothic - tutto Arial - tutto Arial Rounded Bold - no italics Helvetica - tutto Heiti - solo light e medium Hiragino Kaku Gothic - tutto Marker Felt - per app di gioco Trebuchet MS - tutto Verdana - tutto Zapfino - per app di gioco Lapplicazione del NY Times si presenta con il Times New Roman per i titoli ed il testo dellarticolo, ma con Helvetica per sottotitolo, intestazioni, barra delle schede e pulsanti. Questa scelta crea un contrasto che assicura la leggibilit e la conformit con le linee guida di Apple. In questo caso specifico la scelta caduta su lutilizzo degli stessi fonts ma al contrario, vale a dire Helvetica per titoli e sottotitoli e Times New Roman per i paragrafi degli articoli. -la dimensione: in iPad la dimensione del carattere viene misurata in punti. In alcuni framework la dimensione del testo pre-selezionata di default per alcuni elementi. Se si decide di sperimentare personalmente la dimensione del nostro testo, dobbiamo essere sicuri che sia leggibile e che non sforzi la vista. -il peso: un altro aspetto da variare il peso del carattere. Gli utenti sono attratti da questo contrasto che va usato genericamente per i titoli.
CAPITOLO 4.
GRAPHIC DESIGN
51
4.1.2
Colori
La nostra societ associa diversi significati a determinati colori sulla base dellambiente che ci circonda e delle nostre esperienze. Per scegliere i colori pi appropriati alla nostra applicazione importante rilevare lambiente, la cultura e ovviamente il target. La scelta di colori inadeguati pu inviare un messaggio sbagliato o addirittura allontanare definitivamente gli utenti. Oltre ad evocare un significato, un colore pu contribuire a rafforzare la struttura visiva nei seguenti modi: -differenziazione: il colore pu essere usato per differenziare molti elementi visivi. -enfasi: il colore pu essere usato per enfatizzare alcune informazioni o compiti. Bisogna, per far attenzione a non abusare dei colori di enfasi altrimenti il contenuto pu essere ignorato e quindi vanificato il senso. Il colore pu anche sottolineare lazione principale che stiamo compiendo sullo schermo. Inolte dobbiamo assicurarci che non siano in contrasto con quelli usati nelle apps built-in (ad esempio verde e rosso usati per effettuare e terminare una chiamata). -classificazione: il colore pu essere un metodo efficace per classificare i contenuti dellapplicazione. Se si sceglie di usare il colore per la classificazione, dobbiamo assicurarci che lapproccio aggiunga indicazioni chiare di cosa il colore significa. Per la realizzazione di questo progetto di tesi sono state utilizzate sei varianti del colore blu, che partendo da una tonalit brillante va desaturandosi e schiarendosi e che ritorner costantemente in tutte le parti dellapplicazione web.
Figura 4.1: Colori scelti per linterfaccia grafica
CAPITOLO 4.
GRAPHIC DESIGN
52
4.1.3
Logo
Il primo e pi importante step per la definizione dellinterfaccia grafica la definizione di un logo. Un Logo la scritta che rappresenta un prodotto, un servizio o un produttore. Solitamente una versione o rappresentazione grafica di un nome o di un acronimo che vede un uso ben preciso di caratteri, colori e forme. Prima di tutto occorre dunque scegliere il nome del magazine interattivo. Lobiettivo principale la comunicazione, che deve nel bene o nel male, trasmettere un messaggio al target di riferimento. Il bacino di utenza che si interessa alla nostra applicazione deve essere colpito da tale nome e dal messaggio comunicativo che questo deve racchiudere, di conseguenza i termini e le espressioni utilizzate dovranno essere coerenti al percorso progettuale affrontato. Definire la giusta denominazione un percorso che inizia da un elenco di parole chiave e acronimi e dai loro accostamenti in pi combinazioni, dai quali si intende ricavare il nome pi adatto. Il primo dubbio riguarda la scelta della lingua utilizzata. Per donare una connotazione pi internazionale allapplicazione, vista anche linternazionalit dellargomento, sicuramente linglese la lingua pi adatta. Per parole chiave intendiamo tutte quelle parole che gravitano attorno allambito trattato e sicuramente anche quelle che ne denotano la dinamicit ed il fascino. Di seguito ne sono state proposte tutta una serie in fila e successivamente selezionate le pi importanti.
design, new, people, media, think, way, follow, dream, tool,opportunities, idea, life, future, tomorrow, project, brand, factory, store, story, wave, boulevard, behind, look, light, twist, happiness, content, magazine, orientation
Laccostamento delle parole chiave ha prodotto una lista di possibili denominazioni dalle quali emerso quella vincente. the new design ways, the way of design, mediawave, mediaway, way of life, a design way of life, new design way, design life, people of design, people from design, thinkinabout design, just follow me, the pursuit of happiness, the pursuit of a new design way, design boulevard, design factory, look for it, just think, tell me about it, a new way of life, new people,
CAPITOLO 4.
GRAPHIC DESIGN
53
new content people, web tool, media tool, tomorrows designers, designers of ideas, behindesign, the idea, the ideas factory, project life, new projects, project future, everywave, web store, media store, life store, life storm, design storm Applicando un filtraggio vengono selezionati tre possibili nomi finalisti: Behindesign Mediawave LifeStore Infine la scelta ricade sul nome Mediawave Trovato il giusto nome si passa alla sua configurazione grafica partendo dal suo carattere per ricavarne un logo che rispetti i canoni teorizzati del magazine.
Figura 4.2: Parole chiave e bozza grafica
CAPITOLO 4.
GRAPHIC DESIGN
54
Pu sembrare contraddittorio ma per la ricerca del giusto nome e di conseguenza del giusto logo, il rigore sempre un fondamento imprescindibile anche nella creativit. La creativit devessere vincolata entro certi limiti, direzionata dalle regole del targeting, della concorrenza e cos via. Selezionato il nome Mediawave, occorre concentrarsi sulla grafica di questultimo in base a schemi, font e colori coerenti col progetto. In questo caso la creazione di questo logo si servita di una griglia costruttiva realizzata in Adobe Illustrator, applicazione informatica specializzata nellelaborazione di illustrazioni e grafica vettoriale dalla quale sono state ricavate e successivamente accostate le lettere. Sono state utilizzate le quattro varianti del colore blu gi accennato nel paragrafo della scelta dei colori. Il risultato un logo elegante ma allo stesso tempo accattivante e dinamico, dove le lettere scritte in minuscolo sono formate da segmenti di colore irregolari che danno limpressione di riflettere la luce in maniera scaglionata come diamanti.
Figura 4.3: Griglia strutturale
CAPITOLO 4.
GRAPHIC DESIGN
55
Figura 4.4: Logo ricavato dalla griglia
Figura 4.5: Logo finale
Cos come il logo, anche altri elementi del magazine sono stati ricavati con lo stesso metodo, stessi colori e utilizzando la griglia costruttiva, come il Related, lindicatore dei collegamenti interni alle singole interviste alle quali accedere.
Figura 4.6: Related
CAPITOLO 4.
GRAPHIC DESIGN
56
4.2 Proposte grafiche

Iniziamo col ricordare che ogni proposta grafica avr la sua lettera corrispondente. Con in mano lunit informativa ed il wireframe, che hanno il compito di guidare lassemblamento, ci accingiamo effettuate una serie di interfacce grafiche che variano tra loro per forme, colori e strutturazioni. Da le seguenti proposte verr ricavata quella definitiva. Per quanto riguarda la letteraB, che indica la prima pagina di ogni storia dove ci sar la presentazione del personaggio, si pensato di proporre una foto in primo piano che prende tutta la grandezza dello schermo del supporto, accompagnato da un pay-off prima, inteso come lelaborazione verbale che sintetizza le caratteristiche nellambito del web management e dei digital media, del personaggio a cui si riferisce. Successivamente il nome del personaggio. questa scelta giustificata dalla poca notoriet del protagonista della storia. Di conseguenza ci che attirer lutente alla lettura, sar proprio la breve descrizione del pay-off. In alternativauno schermo nermo nero dentro al quale scorreranno le storie presentate dalla copertina e da un titolo esterno a questa in basso. Si passa alle sezioni contrassegnate dalle lettere C, D, E, F, ovvero le pagine che trattano i vari percorsi formativi e professionali. Particolare interesse si dato al posizionamento della sezione dei collegamenti interni o Related, che utilizza molto spazio e che pu essere proposto sia in orientamento orizzontale che verticale. Un punto molto importante e da prendere in considerazione anche la relazione tra il testo ed il suo background. Mentre, al contrario di come si possa pensare, il rapporto tra il testo nero su sfondo bianco non cos immediato ma peggiore che su uno schermo regolare di un pc, combinazioni di colori decentemente correlati come blu chiaro/grigio su sfondo blu scuro o il classico grigio scuro su sfondo bianco, risultano pi efficienti e rendono molto bene alla vista. Un altra soluzione molto apprezzata dai grafici e di tendenza gi prima dellarrivo di iPad luso di noises o textures leggere, che si sono imposte ancora di pi a seguito della grande densit dei colori e di contrasti del tablet. In questo caso queste sono state prese in considerazione nelle prime proposte teorizzate ma abbandonate successivamente perch considerate di troppo allinterno della grafica.
CAPITOLO 4.
GRAPHIC DESIGN
57
Ultimo elemento proposto un menu a scomparsa in alto che semplifica la navigazione in assenza di Table of Content. Di seguito le varianti grafiche:
Figura 4.7: Prima proposta sezione B
CAPITOLO 4.
GRAPHIC DESIGN
58
Figura 4.8: Seconda proposta sezione B
CAPITOLO 4.
GRAPHIC DESIGN
59
Figura 4.9: Terza proposta sezione B
CAPITOLO 4.
GRAPHIC DESIGN
60
Figura 4.10: Prima proposta sezione C
CAPITOLO 4.
GRAPHIC DESIGN
61
Figura 4.11: Seconda proposta sezione C
CAPITOLO 4.
GRAPHIC DESIGN
62
Figura 4.12: Terza proposta sezione C
CAPITOLO 4.
GRAPHIC DESIGN
63
Figura 4.13: Quarta proposta sezione C
CAPITOLO 4.
GRAPHIC DESIGN
64
4.2.1
Soluzione finale
Dalle varie proposte sono stati selezionate le soluzioni finali che doneranno linterfaccia grafica al magazine. Per quanto riguarda la pagina di presentazione dei protagonisti B, si optato per la prima proposta che risulta semplice, diretta e che sfrutta tutti i pixel che il supporto iPad mette a disposizione con una foto ad alta risoluzione in primo piano e il pay-off con il nome scritti a grandi caratteri utilizzando il font Helvetica. Linvito al gesto di scorrimento verticale drag, che d inizio alla lettura, marcato da una freccia che punta verso il basso sotto il nome del protagonista della storia. Il gesto di navigazione drag potr essere eseguito anche per lo scorrimento orizzontale. Le pagine di presentazione dei protagonisti si collegheranno a formare un ipotetico cerchio infinito susseguendosi una dopo laltra. Questa soluzione favorisce leventuale inserimento postumo di altre storie, che semplicemente andranno a prendere parte alla catena. Tali motivazioni sono da ricercarsi in quanto essendo il numero 0 di un magazine, questo dovr prevedere le modifiche che vi dovranno essere apportate continuamente. Come accennato sar inoltre inserito nella progettazione per semplificare ulteriormente, un menu a scomparsa utilizzabile per scorrere velocemente di storia in storia e accessibile tramite un grande tasto che lo fa scorrere verso il basso prendendosi gran parte della pagina. Per le altre pagine che vanno dalla lettera C, D, E fino alla F, stata selezionata la proposta con la colonna contenente i collegamenti interni Related posta verticalmente rispetto alla pagina, sia essa in modalit Portrait che Landscape. Lobiettivo sicuramente quello di guadagnare spazio, donare dinamicit e non dar lidea che la storia si esaurisca in una sola pagina, andando ad interrompere la navigazione con una sezione orizzontale pesante e ingombrante. La colonna verticale sar inoltre mobilitata da unanimazione che la far scorrere dallalto ogni volta che si apre una sezione della storia. Per finire il rapporto pi appropriato tra i caratteri ed il background risultato essere tra il grigio scuro del testo su sfondo bianco. Questa opzione stata preferita per via del minor affaticamento degli occhi dellutente durante la lettura degli articoli. Collegamenti esterni anche chiamati link, saranno evidenziati allinterno del paragrafo, ingrandendone e spessendone i caratteri. Linterfaccia grafica viene cos trasferita sul supporto utilizzando i linguaggi di strutturazione HTML5 e di markup CSS3. Inoltre la libreria di funzioni JavaScript, jQuery, che ne semplifica la programmazione.
Capitolo 5
Metafore di interazione innovative

5.1 Nuove tipologie di interazione
Il progetto utilizza metodologie di interazione di serie sul supporto muti-touch di iPad, che sono state elencate allinizio di questo elaborato. Si visto che il magazine rende possibile la sua consultazione mediante le azioni di tocco e di scorrimento delle pagine chiamati rispettivamente Tap e Drag. Ipotizzando una nuova metafora dinterazione tra lutente ed il dispositivo apriamo ad una nuova gestualit che sfrutti le propriet dellapparecchio ed i contenuti del magazine. La prima forma di gestualit alternativa proposta si ritrova molto spesso nelle applicazioni dei videogiochi. Lo strumento meccanico che la supporta laccelerometro. Esso in grado di captare la posizione e linclinazione dellapparecchio rendendo cos possibile leffetto virtuale di caduta verso il basso dovuto alla forza di gravit. Inoltre, cos come nellaltro apparecchio Apple iPhone, iPad rende possibile leffetto shake, che consiste nellagitare il tablet ottenendo un rimescolamento ed il cambio di schermata allinterno dellapplicazione. Il secondo tipo di interazione riguarda la lettura e la conseguente risposta dellapparecchio ad un determinato stimolo realizzato con le dita sullo schermo multi-touch. Ad ogni determinato segno tracciato corrisponder una precisa sezione dellapplicazione web. Infine viene proposta la gestualit basata sui contenuti, ovvero linterazione tra il tocco dellutente ed i rich contents del magazine digitale, per la maggior parte dei casi fotografie. Ad ogni area prestabilita della foto sullo schermo corrisponder una sezione precisa del magazine. 65
CAPITOLO 5.
METAFORE DI INTERAZIONE INNOVATIVE
66
5.1.1
Interazione sensor based
La prima forma di interazione si basa sui sensori del dispositivo. Di seguito vengono mostrati due esempi di come poter navigare allinterno dellapplicazione. Nel primo caso il supporto viene utilizzato per direzionare lo scorrimento delle pagine, nel secondo come giroscopio. Inclinando iPad in avanti o allindietro, lapplicazione risponder scorrendo le pagine degli argomenti allinterno di una singola storia.
Figura 5.1: Inclinazione indietro
CAPITOLO 5.
67
Figura 5.2: Inclinazione in avanti
Al contrario inclinando iPad lateralmente sar possibile visionare le sezioni delle storie corrispondenti del personaggio precedente o successivo. Questa operazione riguarda infatti la visualizzazione dei Related della sezione di una storia.
CAPITOLO 5.
68
Figura 5.3: Inclinazione laterale
Ancora, sar possibile passare direttamente da un protagonista del magazine allaltro, con un gesto che somiglia quello di sfogliare la pagina di una rivista cartacea. Questa operazione sar possibile inclinando iPad lateralmente di 180 gradi e successivamente riportandola nella posizione originale.
CAPITOLO 5.
69
Figura 5.4: Inclinazione di 180 gradi
Infine il gesto di Shake sar sfruttato nel magazine digitale per aprire una sezione di una storia di un personaggio a caso, offrendo un divertente spunto per una lettura mai annoiata e per linterazione sotto tutti i punti di vista. Nel secondo caso il supporto inteso come una sorta giroscopio. Con questa metafora si pu immaginare una realt virtuale visualizzabile tramite iPad, che cos facendo diviene una finestra di collegamento con lutente. In questa realt il magazine digitale si presenta come una gerarchia di contenuti cilindrica dove nellanello superiore si trovano le pagine di presentazione degli intervistati e negli anelli inferiori gli argomenti delle interviste. Lutente si trova al centro del menu cilindrico e vi naviga girando su s stesso. Anche questa metafora ispirata alle applicazioni dei videogiochi interattivi.
CAPITOLO 5.
70
5.1.2
Interazione gesture based
La seconda forma di interazione si basa sui gesti che lutente compie sulla superficie multi-touch di iPad. Questo tipo di interazione fonda le sue ragioni su una gestualit divertente, attraverso la quale lutente gioca con il magazine digitale disegnando e scarabocchiando sullo schermo. Si teorizza che una serie di gesti tracciati sulla superficie del dispositivo dallutente, permettano per accedere a determinate parti dellapplicazione. Partendo dalla pagina di presentazione del personaggio, i seguenti simboli che risulteranno essere dei semplici scarabocchi disegnati con le dita, portano alle singole sezioni della storia. Per il percorso formativo e quello professionale, si pensato che lutente possa arrivarci disegnando il simbolo di unipotetica scala. La scala rappresenta sicuramente gli step che il protagonista ha asceso a partire dal diploma dei master in multimedia content design.
Figura 5.5: Simbolo della scala
CAPITOLO 5.
71
Per arrivare al punto della storia dove si parla delle attivit ed i servizi offerti, si teorizzato che lutente debba tracciare sul display unipotetica spirale, a significare tutte quelle attivit che ruotano attorno al protagonista.
Figura 5.6: Simbolo della spirale
Lultimo gesto teorizzato per linterazione dai tratti giocosi, quello che rimanda alla sezione delle curiosit. Si pensato che il lettore potesse accedervi descrivendo un punto interrogativo sullo schermo. Il punto di domanda rimanda concettualmente a questioni non proprio inerenti allambito di argomentazione, invitando ad indagare ed a scavare nella vita dei protagonisti del magazine.
CAPITOLO 5.
72
Figura 5.7: Simbolo del punto di domanda
Conclusioni
Per questa tesi di ricerca sulle nuove modalit di Interaction design, stato realizzato il numero zero di un magazine digitale intitolato Mediawave, commissionato dal centro di eccellenza universitaria MICC, Media Integration and Communication Center. Questo elaborato ha coperto tutte le fasi di realizzazione del progetto dalla realizzazione allo sviluppo del prototipo. Esso si proposto di raggiungere due obiettivi che riguardano rispettivamente i contenuti e linnovazione tecnologica. Da una parte, quello di raccontare storie ed esperienze in grado di interessare ed ispirare le carriere professionali degli interessati al settore, dallaltro di teorizzare una nuova forma di interazione tra lutente ed il dispositivo attraverso nuove metafore interattive che possono essere utilizzate ed interpretate dal sistema. Una prima fase ha riguardato lanalisi del supporto multi-touch Apple iPad e dei linguaggi di formattazione da utilizzare come HTML5 e CSS3. Successivamente si passati allo studio della concorrenza e del target di riferimento. Il modello dutenza stato identificato con caratteristiche precise che vanno dallet anagrafica, livello culturale, percorso di studi, fino ad arrivare agli obiettivi ed ai percorsi che ha deciso di intraprendere. La seconda fase ha riguardato lo studio dei contenuti dellapplicazione web. Le storie riportate nella rivista digitale riguardano determinati personaggi che sono stati selezionati da un bacino di potenziali candidati sulla base delle competenze mostrate nellambito del web management e dei digital media. Il risultato stata la scelta di sette protagonisti i cui racconti sono stati categorizzati e destinati a diverse sezioni della rivista. La terza fase ha riguardato un lavoro di strutturazione legata allarchitettura dellinformazione. A questo scopo ci si serviti di schemi e diagrammi specifici come la struttura di navigazione (schematizzazione gerarchica dei contenuti), il Flow chart (la rete di collegamenti interni ed esterni tra i contenuti), lestrapolazione dellunit informativa (gli elementi che compongono ogni singola pagina della rivista), ed infine il Wireframe (la bozza riassuntiva). La quarta fase ha visto come protagonista la progettazione grafica. Identificati gli strumenti di lavoro, si passati alla definizione delle caratteristiche grafiche primarie grafiche come il Font, i Colori ed il Logo. 73
CONCLUSIONI
74
Sono state proposte circa tre varianti per ogni sezione del magazine, sulle basi delle informazioni precedentemente definite e sono state identificate le soluzioni pi congeniali al progetto. Lapplicazione web stata cos realizzata con lutilizzo dei linguaggi HTML5, CSS3 e JavaScript, seguendo lintero percorso di sviluppo del software. La quinta ed ultima fase rappresenta la parte prettamente sperimentale di questa tesi nella quale sono stati teorizzate e progettate nuove metafore di interazione per larricchimento della User Experience. La sperimentazione ha riguardato la teorizzazione di nuovi linguaggi di interazione basati sullutilizzo di nuove gestualit interattive per la comunicazione tra lutente (lettore/fruitore) e la rivista digitale. Sono stati studiati due esempi di nuove metafore di interazione che si basano rispettivamente sui sensori montati a bordo dellapparecchio e sui contenuti del magazine. In conclusione si pu affermare che le capacit apprese durante lo sviluppo di questo progetto spaziano in un contesto che non si limita alluniverso della progettazione informatica, ma comprendono anche altre sfere altrettanto interessanti di gestione e sviluppo dei contenuti e di nuovi metodi di apprendimento.
Bibliografia
Mark Pilgrim - Dive into HTML5 eBook 2011 Smashing Magazine - Mobile deign for iPhone and iPad eBook 2011 www.free-ebooks-library.com - Designing the iPhone User Experience 2011
75
Sitografia
http://www.uxmag.com/design/ipad-user-experience-guidelines http://www.informationarchitects.jp/en/designing-for-ipad-reality-check/ http://www.smashingmagazine.com/2010/04/16/design-tips-for-your-ipad-app/ http://www.smashingmagazine.com/2010/05/28/web-development-for-the-iphoneand-ipad-getting-started/ http://developer.apple.com/ipad/sdk/ http://bluefaqs.com/2010/04/20-creative-ipad-apps-for-web-developers-and-designers/ http://www.micc.unifi.it/landucci/ebook_Designing_the_iPhone_User_Experience. pdf http://www.bakerframework.com/ http://www.lukew.com/presos/preso http://yiibu.com/about/site/ http://www.asidemag.com/ http://www.lakercompendium.com/ http://initializr.com/ http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-fromscratch/ http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/ 76
http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/ http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/ http://padilicious.com/code/touchevents/index.html - Supporto finger/swipe http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets
77

Mediawave: Nuovo Progetto Per Rivista Multimediale Per iPAD

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mediawave: Nuovo Progetto Per Rivista Multimediale Per iPAD

Uploaded by

Copyright:

Available Formats

Universit degli Studi di Firenze

Facolt di Architettura Corso di Laurea in Disegno Industriale

Mediawave: nuovo progetto per rivista multimediale per iPad

Gianpaolo DAmico, Lea Landucci, Andrea Ferracani, Daniele Pezzatini

MEDIAWAVE: NUOVO PROGETTO PER RIVISTA MULTIMEDIALE PER iPAD

Brainstorming Scelta dei protagonisti Categorizzazione

Metafore di interazione innovative

Conclusioni Bibliografia Sitografia

Figura 1.1: Interfaccia iPad nelle due modalit di visione

<link rel=stylesheet type=text/css href=foglio_di_stile.css/>

Figura 1.2: Logo di HTML5

Figura 1.3: Rappresentazione documento suddiviso con i nuovi tag

Figura 1.4: Analisi del targeting effettuata in Xmind

1.5 Analisi dei prodotti esistenti

Figura 1.5: Logo di Pulse News

Figura 1.6: Logo di Blancspot News

Figura 1.7: Logo di Flipboard

Figura 1.8: Logo di Zinio

Figura 1.9: Logo di FLUD News

2.2 Scelta dei protagonisti

Figura 2.1: Brainstorming

Figura 2.2: Schema dei candidati

Figura 2.3: Collegamenti tra i protagonisti

Figura 2.4: Schema di categorizzazione

3.1 Struttura di navigazione

Figura 3.1: Struttura di navigazione

Figura 3.2: Flow chart

3.2 Unit informativa

Figura 3.3: Unit informativa

Figura 3.4: Wireframe esteso

Figura 3.5: Wireframe Cover

Figura 3.6: Wireframe Character page

Figura 3.7: Wireframe Percorso formativo

Figura 3.8: Wireframe Ruolo professionale

Figura 3.9: Wireframe Attivit e servizi

Figura 3.10: Wireframe Curiosit

Figura 4.1: Colori scelti per linterfaccia grafica

Figura 4.2: Parole chiave e bozza grafica

Figura 4.3: Griglia strutturale

Figura 4.4: Logo ricavato dalla griglia

Figura 4.5: Logo finale

Figura 4.6: Related

4.2 Proposte grafiche

Figura 4.7: Prima proposta sezione B

Figura 4.8: Seconda proposta sezione B

Figura 4.9: Terza proposta sezione B

Figura 4.10: Prima proposta sezione C

Figura 4.11: Seconda proposta sezione C

Figura 4.12: Terza proposta sezione C

Figura 4.13: Quarta proposta sezione C

Metafore di interazione innovative

METAFORE DI INTERAZIONE INNOVATIVE

Interazione sensor based

Figura 5.1: Inclinazione indietro

METAFORE DI INTERAZIONE INNOVATIVE

Figura 5.2: Inclinazione in avanti

METAFORE DI INTERAZIONE INNOVATIVE

Figura 5.3: Inclinazione laterale

METAFORE DI INTERAZIONE INNOVATIVE

Figura 5.4: Inclinazione di 180 gradi

METAFORE DI INTERAZIONE INNOVATIVE

Interazione gesture based

Figura 5.5: Simbolo della scala