Docente: Yaniv Steiner

Tutor: Giovanni Curreli

Articolo accademico

Esercitazione in Flash

ArtPhone

Flow

Il flow chart di riferimento è quello dell’applicazione Moving pictures.

Scelte stilistiche

Font: il font utilizzato nell’iPhone è Helvetica; per coerenza abbiamo deciso di attenerci alle linee guida della Apple e mantenere il medesimo carattere, che anche in dimensioni ridotte assicura leggibilità.

Copertina: attraverso la tecnica del collage mostriamo il contenuto dell’applicazione senza renderlo troppo palese.

Nome: richiama volutamente ed esplicitamente sia il nome dello strumento iPhone, sia il tema dell’applicazione.

Layout: partendo dal posizionamento delle diverse immagini selezionate all’interno dell’interfaccia, ci siamo resi conto della difficoltà di trovare un unico modello di impaginazione che fosse adatto a contenere sia le immagini (verticali e orizzontali) sia il relativo testo; quindi abbiamo deciso di adottare due diversi moduli. Qui viene mostrato lo sviluppo dell’impaginazione:

Ricerca

Il problema che abbiamo dovuto fronteggiare è stato quello del reperire immagini gratis e legalmente utilizzabili. Abbiamo così scoperto la differenza tra CC (creative commons) e Public Domain, ovvero il primo non permette di adoperare le foto per fini commerciali in quanto hanno un possessore, invece il secondo consente l’utilizzo da parte di chiunque e per qualunque scopo. Inoltre si è aperta la questione su chi sia il possessore di un’opera d’arte e se le copie di essa siano considerabili alla stregua dell’opera o mere riproduzioni;  abbiamo quindi appreso che le immagini, in quanto riproduzioni, possono essere utilizzate anche per fini commerciali. Questo può avvenire solo se su di esse non vige più il copyright, ovvero sono passati almeno 70 anni dalla morte del loro autore e quindi risiedono nel pubblico dominio. La fonte nella quale abbiamo reperito le immagini è Wikipedia, poichè dichiara se su di esse vige o meno il diritto d’autore.

Possibilità di sviluppo

Questa applicazione prevede di poter scaricare altre collezioni di immagini basate su altre tematiche. Inoltre, apportando qualche modifica al codice già esistente, potrebbe facilmente diventare una guida museale aggiornabile per ogni nuova mostra e scaricabile gratuitamente o dal sito web del museo . Questo è interessante in quanto eliminerebbe il problema delle audioguide, che presentano diversi inconvenienti, dalla necessità di manutenzione al costo elevato, che non invoglia l’utente a servirsene. In più al consumatore rimarrebbero come ricordo le immagini dell’esposizione da poter consultare in qualsiasi luogo e momento, anche non essendo più nel museo.

1-  Girlfriend

2- 8 ball

3-  Moving pictures

4- Magic card

5- Russian roulette

Questa applicazione vi aiuta a trovare ispirazione nella scelta dei possibili nomi da dare al vostro bambino.

Ci sono 5 categorie in base alle quali si può arrivare a identificare un numero ristretto di possibili nomi: sesso, lunghezza del nome, selezione caratteri e favoriti.

This applications helps you to find an inspiration to catch possibles names for your baby. There are 5 categories under which you can get to a less dense name’s ammount: sex, lenght, search, select character, favourites.

Design the app flow: drafts

First flow

Definitive flow

Proponiamo di utilizzare emoticon rispetto alle icone classiche.

Instead of using classical icons we propose to use emoticons.

Students:  Matteo Ruggiu, Luna Gasparini

Laboratorio: Interaction 2° anno

Docente: Yaniv Steiner

Tutor: Giovanni Curreli

WeatherPark è un’applicazione per iPhone che ti permette di conoscere in tempo reale le condizioni climatiche del luogo in cui i trovi soltanto osservando l’icona presente nel menù; questa cambia automaticamente indicando all’utente la condizione atmosferica tramite simpatici personaggi e ambientazioni differenti.
Cliccando sull’icona, l’immagine si ingrandisce e dà ulteriori informazioni riguardo temperatura, vento e umidità.

WeatherPark let you know on time the weather in the place that you are just watching the icon on the iPhone menù, this will change depending on the weather.
If you are interested in more informations like grades, wind and humidity just click on the icon and you will get them on a funny screenseaver.

Il sito in cui sono stati creati i personaggi è www.sp-studio.de

Docente: Yaniv Steiner

Tutor: Giovanni Curreli

Durante il corso di interaction design tenuto dal docente Yaniv Steiner ho dovuto affrontare tematiche che potrebbero sembrare lontane dalla mia concezione di design ma che a una più attenta analisi risultano invece fondamentali in quanto costituiscono uno sviluppo notevole di quella ricerca che io considero essere alla base del design stesso. Attraverso questo articolo accademico cerco di esporre nel miglior modo possibile gli argomenti chiave trattati durante il corso partendo dalla definizione di flow chart.

Il flow chart è una rappresentazione grafica, una mappa schematica, in grado di riassumere lo sviluppo di un determinato progetto o, più semplicemente, è una rappresentazione in grado di esplicare in maniera ordinata i nostri processi logici. Attraverso algoritmi quindi, il diagramma di flusso deve garantire comprensione immediata del funzionamento del nostro percorso logico attraverso un controllo accurato della funzionalità e della casistica del ragionamento. Nello sviluppo di un flow chart si utilizzano molto spesso simbologie per identificare diversi tipi di azione come ad esempio ingresso/uscita, che indicano un’interazione con un fenomeno esterno mostrando il risultato ottenuto, il termine, che indica la conclusione del processo, le frecce, che indicano la direzione attraverso la quale deve confluire un percorso, e così via. Altrettanto spesso però lo sviluppo di un flow può essere rappresentato semplicemente attraverso il collegamento di parole, pensieri, o fasi progettuali senza servirsi di alcun simbolo. Esistono dunque diversi flow chart a seconda del processo progettuale che essi schematizzano ma, in qualunque modo si decida di utilizzarli e svilupparli, è necessario che essi siano caratterizzati da logicità, precisione e chiarezza. Per quanto riguarda il flow chart dell’applicazione ArtPhone l’elemento su cui abbiamo insistito riguarda essenzialmente la strutturazione del percorso logico dalla quale poi sono derivati tutti gli altri aspetti riguardanti la sua comprensibilità e la sua efficacia grafica. Il primo flow chart è stato realizzato utilizzando come esempio il funzionamento dell’applicazione Moving pictures, siamo partiti quindi da una struttura ad albero il cui apice dichiarava l’azione “press icon” dalla quale, seguendo la casistica delle azioni successive, si sviluppano tutte le altre parti del flow sino ad arrivare alla sua conclusione. Durante la sua realizzazione mi sono reso conto di quanto ragionamento sia necessario per riuscire a creare, in modo ordinato e chiaro, il flow anche di un semplicissimo processo logico come può essere quello della nostra applicazione. Quest’ultima, in quanto consiste in una raccolta di immagini legate al mondo dell’arte e del design, ci ha portato a confrontarci col problema dell’intellectual property che ha reso parecchio complessa la fase di selezione delle immagini da utilizzare. La proprietà intellettuale consiste in una serie di diritti miranti a tutelare la creatività e l’ingegno umani ed evitare così abusi da parte di soggetti non autorizzati di progetti, invenzioni e creazioni altrui. Nello specifico quindi il problema che abbiamo dovuto fronteggiare è stato quello del reperire immagini gratis e legalmente utilizzabili. Abbiamo così scoperto la differenza tra CC (creative commons) e Public Domain, ovvero il primo non permette di adoperare le foto per fini commerciali in quanto hanno un possessore, il secondo invece consente l’utilizzo da parte di chiunque e per qualunque scopo. Inoltre si è aperta la questione su chi sia il possessore di un’opera d’arte e se le copie di essa siano considerabili alla stregua dell’opera o mere riproduzioni; abbiamo quindi appreso che le immagini, in quanto riproduzioni, possono essere utilizzate anche per fini commerciali. Questo può avvenire solo se su di esse non vige più il copyright, ovvero sono passati almeno 70 anni dalla morte del loro autore e quindi risiedono nel pubblico dominio. La fonte nella quale abbiamo dovuto reperire le immagini è Wikipedia, poiché dichiara se su di esse vige o meno il diritto d’autore. Con la creazione di ArtPhone mi sono reso conto di quali debbano essere le fasi per progettare una qualsiasi applicazione per iPhone ; è consigliabile procedere allo sviluppo delle stesse in modo separato e seguendo un certo ordine, in questo modo si limita la possibilità di tralasciare qualsiasi aspetto che a prima vista potrebbe sembrare irrilevante e di poco conto ma che nelle fasi di sviluppo progettuale successive, potrebbe costituire invece un problema ormai difficilmente risolvibile. Gli step del processo di realizzazione di una qualunque applicazione per iPhone in ordine cronologico sono:

- Definire il concept progettuale verificando la sua fattibilità destando particolare attenzione a non svilupparne simili ad altre applicazioni esistenti per evitare plagi, evitando quindi di impossessarsi di idee, lavori, che possono essere artistici, letterari o altro, facendoli passare per propri danneggiando quindi moralmente e spesso economicamente il legittimo proprietario, incombendo quindi in sanzioni penali.

- Identificare i potenziali utenti per stabilire con maggior chiarezza la tipologia e la specificità del concept da sviluppare; – Organizzare in maniera logica e cronologica lo sviluppo dell’applicazione per evitare di tralasciare qualsiasi aspetto e fase progettuale;

- Definire le modalità di utilizzo dell’applicazione attraverso disegni schematici e più specificatamente attraverso la strutturazione di flow charts;

- Stabilire quale sarà il layout per definire il posizionamento delle immagini, testi o qualsiasi altro elemento presente nell’applicazione per poi stabilire lo stile ed individuare le soluzioni grafiche adatte attraverso la scelta del font, l’ideazione dell’icona, dello splash screen e delle copertine;

- Creare il codice di programmazione attraverso i giusti strumenti informatici per poi eseguire i test di funzionalità generali dell’applicazione;

- Eseguire le correzioni eventuali e pubblicare il prodotto in modo adeguato e incisivo attraverso una comunicazione dal carattere fortemente convincente e commerciale.

Con lo sviluppo della tecnologia il prodotto ha assunto nuovi significati che lo portano a spaziare al di là della semplice materia fisica catapultandolo nel mondo virtuale. È qui che il prodotto diventa l’interfaccia; è qui che l’utente si relaziona con gli attributi funzionali e sensoriali relativi al funzionamento di un determinato prodotto. È quindi attraverso l’interfaccia che l’utente può usufruire a pieno del prodotto che diventa quindi sinonimo della stessa. Ci sono ormai infiniti casi in cui ciò avviene e uno degli esempi più significativi riguarda lo sviluppo tecnologico dei cellulari (vedi ad esempio iPhone) che negli ultimi tempi ha incrementato il suo potere di relazionarsi con l’utente attraverso interfacce che servendosi di feedback visivi o sonori, esplorabilità, correlazioni naturali ( attraverso la tecnologia del “multi touch screen” ), organizzazione delle ormai numerosissime funzioni e applicazioni, risultano sempre più semplici e sempre più vicine al modo naturale dell’agire umano. È proprio per questo che il “new designer” dovrebbe conoscere le basi del computer code attraverso le quali può così riuscire a progettare nel modo migliore, rimanendo a passo con la tecnologia, software che siano intuibili e facilmente utilizzabili dall’utente. Per computer code si intende una serie di istruzioni scritte che rispettano una certa sintassi ( linguaggio di programmazione) attraverso le quali far compiere all’hardware determinate operazioni necessarie a fornire all’utente servizi non realizzabili in altro modo e la cui esecuzione risulta trasparente. Il computer code costituisce quindi un mezzo per visualizzare servizi che vanno dai siti web a qualsiasi altro tipo di visualizzazione virtuale. Xcode e Action Script (Flash) sono due esempi di computer code che si differenziano essenzialmente per il divario di complessità di utilizzo. Più specificatamente Xcode è un linguaggio di programmazione ideato e realizzato dalla Apple che possiede una struttura diversa dagli altri computer code in quanto le istruzioni che esso supporta devono avere un livello di precisione e chiarezza piuttosto elevato. Tali caratteristiche lo rendono, soprattutto per quanto riguarda programmatori con un livello di esperienza modesto, uno dei linguaggi più complessi e difficilmente controllabili. L’ActionScript invece, è un altro programma di codificazione più simile allo standard sintattico degli altri computer code; questa sua caratteristica, al contrario del Xcode lo rende più semplice e intuitivo. E’ sempre più forte in me l’idea che “tutto è design” e di quanto sia estremamente importante capire che esso si sta sviluppando in ogni campo della conoscenza umana; conoscere e sfruttare qualsiasi strumento di progettazione diventa quindi fondamentale per il lavoro futuro.