FLSS

Flatemates’ LifeSupport System

Design Documentation

Università degli Studi di Milano BicoccaA.A. 2012/2013

Frantini ChiaraMinoli SaraVacca Matteo

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

1. Casi d’usoDi 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

- - Diagramma 3: Gestione eventi

- Diagramma 4: Lista spesa

- Diagramma 5: Gestione spesa

2. Architettura logica del problema

- Diagramma dei dati

- Diagrammi di attività:

Registrazione

Login

Creare una casa

Cercare una casa

Creare una lista della spesa

Dividere una spesa

Inserire una bolletta

Estinguere un debito

Cambiare lo stato dell’utente

Richiedere l’iscrizione a una casa

Creare una evento

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.

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.

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

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.

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