Il documento descrive la progettazione del sistema di supporto alla vita degli studenti 'flss flatemates', evidenziando i casi d'uso, l'architettura logica e gli strumenti utilizzati. Sono stati impiegati Adobe Illustrator per la creazione di grafica vettoriale e Axure per il prototipo interattivo del sistema. La progettazione ha seguito linee guida di design dell'interfaccia utente, con enfasi su struttura e semplicità, culminando nella realizzazione di un prototipo testabile.

1. FLSS
Flatemates’ Life
Support System
Design Documentation
Università degli Studi di Milano Bicocca
A.A. 2012/2013
Frantini Chiara
Minoli Sara
Vacca Matteo

2. INDICE
1. Casi d’uso
2.Architettura logica
2.1. Diagramma dei dati
2.2. Diagrammi di attività
3. Strumenti utilizzati
3.1. Illustrator
3.2.Axure
4. Progettazione

3. 1. Casi d’uso
Di seguito riportiamo i diagrammi dei casi d’uso (Use Case Diagram), che descrivono le
funzioni offerte dal nostro sistema, e come vengono percepite e utilizzate dagli utenti
che interagiscono con esso.
- Diagramma 1: casi d’uso
- Diagramma 2: Gestione Profilo personale

4. - - Diagramma 3: Gestione eventi
- Diagramma 4: Lista spesa
- Diagramma 5: Gestione spesa

5. 2.Architettura logica del problema
- Diagramma dei dati
- Diagrammi di attività:
Registrazione

6. Login
Creare una casa
Cercare una casa
Creare una lista della spesa

7. Dividere una spesa
Inserire una bolletta
Estinguere un debito

8. Cambiare lo stato dell’utente
Richiedere l’iscrizione a una casa

9. Creare una evento

10. 3. Strumenti utilizzati e rassegna critica sulle tecnologie
In questa sezione descriviamo i software da noi utilizzati nella fase di disegno e di
costruzione di un prototipo, ovvero Adobe Illustrator e Axure.
La scelta di questi sistemi è dipesa dalle funzionalità offerte e dalla praticità di utilizzo.
>> Illustrator
Adobe Illustrator è un’applicazione informatica prodotta dalla Adobe Systems
Incorporated, specializzata nell’elaborazione di illustrazioni e grafica vettoriale.
Il programma permette di costruire immagini vettoriali attraverso forme geometriche o
attraverso degli strumenti di tracciatura.
Un’immagine vettoriale non perde di definizione ingrandendola o riducendola.
L’utilizzo di un vettore ha il pregio di non perdere alcuna informazione rispetto alla sua
creazione. Effettuando un semplice l’ingrandimento (zoom) di un oggetto disegnato in
illustrator, è possibile notare come la qualità di esso venga totalmente mantenuta,
rendendolo usabile a qualsivoglia dimensione. Se si facesse un’operazione del genere in
Photoshop, con un’immagine scattata da una fotocamera digitale, si noterebbe come
nell’ingrandimento emergano i fastidiosi “pixel”, che rendono inutilizzabile l’immagine.
I lavori più sviluppati attraverso Illustrator sono i seguenti:
- costruzione di un logo,
- prodotti pubblicitari (biglietti da visita,cartellonistica, scritte)
- layout per siti web, o app mobile.
- impaginazione tavole di architettura.

11. Ci siamo avvalsi di questo software, nella fase di definizione e di elaborazione dei
requisiti per disegnare i diagrammi di dominio e delle attività. Successivamente sarà
fondamentale per realizzare il concept grafico definitivo del nostro sistema.
Riposrtiamo due esempi di bozze di layout grafico, disegnati in Illustrator.

12. >>Axure
Axure è un software concepito appositamente per supportare l’attività del progettista
di applicazioni web, web based e mobile. Gli ideatori di questo programma hanno
saputo raccogliere le specifiche necessità dell’interaction designer e integrarle insieme
in un unica interfaccia di editing. L’interfaccia visuale, integra i comuni oggetti presenti in
un’interfaccia web ( form, select, radio button…); con un semplice trascinamento
possono essere inseriti nel prototipo di progetto ed eventualmente personalizzati in
colori e dimensioni, inoltre un versatile sistema di master permette la creazioni di
oggetti di vario tipo per cui la gestione delle modifiche diventa centralizzata.
Inoltre è semplice reperire nel web diverse librerie di pulsanti, box, frecce e form da
incorporare alla libreria del software, espandendo così la possibilità di creare un
prototipo personalizzato e unico.
Ogni schermata e ogni elemento hanno relativi spazi per le annotazioni, ogni elemento
può avere vari livelli di annotazione per creare specifici corpi di informazioni per il
committente, per il grafico o per lo sviluppatore.
Axure implementa un set di funzioni per implementare l’interattività nel prototipo che
non necessità di conoscenze di programmazione; esiste poi la funzionalità per esportare
il prototipo in HTML: delle vere e proprie pagine web dove le funzioni descritte
possono essere effettivamente sperimentate. In queste pagine le note e le specifiche
tecniche possono già essere visualizzate come tooltip a comparsa.

13. 4. Progettazione
Nel progettare il nostro sistema abbiamo seguito i criteri essenziali dello
User Interface Design:
1) La struttura. L’interfaccia utente deve essere organizzata in modo efficace e utile in
conformità a modelli chiari e coerenti, riconoscibili dagli utenti con evidenza, collocando
insieme gli elementi collegati da una relazione, separando quelli scollegati tra loro.
2) Semplicità. Il nostro design deve facilitare le operazioni, comunicare in un linguaggio
semplice e chiaro, fornendo suggerimenti per le operazioni più complicate.
Di seguito descriviamo brevemente le varie fasi che hanno portato dall’idea alla
realizzazione del prototipo.
- Individuazione dei requisiti
Individuata l’idea, abbiamo svolto un’analisi preliminare (questionario e stato dell’arte),
che ci ha permesso di definire i requisiti del nostro sistema in base ai bisogni dei
possibili utenti.
- Wireframing
Una volta chiarite le funzionalità del sistema, abbiamo realizzato dei wireframe prima su
carta e poi digitali grazie all’uso del software Axure. Questa fase prevede la definizione
degli spazi e dei contenuti della futura pagina web o app, e precede la declinazione
grafica.

14. - Prototipo
Realizzare un prototipo serve a tracciare il flusso di interazione e a descrivere le
modalità in cui l’interfaccia web reagisce agli input dell’utente, nei diversi casi d’uso.
Questa fase è utile al fine di testare sugli utenti il funzionamento del sistema.
- Concept grafico
Testato il corretto funzionamento del sistema si può procedere con la realizzazione
della grafica definitiva, che consentirà, con le debite modifiche, di ottenere un
prototipo che si avvicina molto di più al risultato finale.