Studio e sviluppo di un sistema CSCW per una azienda di consulenza multimediale
Anteprima
ESTRATTO DOCUMENTO
Analisi dei requisiti
utenti si aspettano di avere attraverso l’uso dell’applicazione. Per fare questo si utilizzano
diagrammi dei casi d’uso, di attività e di sequenza.
2.2.1 Venditore
L’unica operazione che l’utente Venditore è abilitato a fare é la visualizzazione delle
informazioni personali del dominio relative ad un contatto (vedi figura 2.2). Le informazioni
che si ricavano da questa interrogazioni sono utili al venditore quando è fuori sede ed ha
bisogno di avere informazioni dettagliate riguardanti un dominio in particolare. Su specifica
richiesta del committente a questo particolare utente è stato inibita la possibilità di accedere
alla parte di amministrazione e di sviluppo.
«uses» visualizza
informazioni sui domini
Venditore
Figura 2.2: Requisiti funzionali – Venditore
Di seguito è riportato il diagramma delle attività del caso d’uso relativo all’utente Venditore.
Come si può notare la prima fase è quella di autenticazione al sistema perché come detto in
precedenza il sistema è accessibile solo alle persone autorizzate in possesso di login e
password. (vedi figura 2.3)
42 Analisi dei requisiti
Sistema
Venditore
Accesso tramite login e password Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page
Crea pagina Crea menu’ Principale
elenco Domini
Visualizza pagina Venditore Crea pagina Venditore
Carica informazioni
Seleziona dominio dall’elenco dominio selezionato
Visualizza informazioni
dominio selezionato
Esci dall’applicazione logout
Figura 2.3: Diagramma di attività – Venditore
43 Analisi dei requisiti
2.2.2 Sviluppatore
La figura 2.4 presenta i requisiti funzionali dell’utente Sviluppatore che si apprendono dalla
descrizione del problema. Come accennato precedentemente tutte queste attività le puó fare
anche l’utente Amministratore che andremo successivamente ad analizzare.
. consultazione della
lista della cose da fare
(ToDo) inserimento commento
inserimento e gestione di relativo ad un task o ad un
file relativi ai task o ai progetto
progetti «uses» «uses»
«uses» «uses»
«uses» visualizza
visualizza dettagli informazioni sui contatti
del task o del progetto sviluppatore
Figura 2.4: Requisiti funzionali – Sviluppatore
Ci aiutiamo a capire come l’utente Sviluppatore usufruisca del sistema, e come il sistema
risponde, utilizzando un diagramma di attività prendendo in considerazione ognuno dei casi
d’uso rappresentati. (vedi figura 2.5)
44 Analisi dei requisiti
Sistema
Sviluppatore
Accesso tramite login e password Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page Valido anche
per
Amministratore
Crea pagina Crea menu’ Principale
elenco ListaToDo
Visualizza pagina Sviluppatore Crea pagina Sviluppatore
assegnato
a sviluppatore
da
amministratore Seleziona task tramite Carica task selezionato
la lista ToDo
Visualizza descrizione
del task selezionato
Inserisci il numero di Salva dati
ore di lavoro
Chiudi il task
selezionato
Crea commento
Inserisci file
richiedi elenco progetti e
reltivi tasks
ordinati per data (calendario ) Carica lista progetti e
reltivi tasks
richiedi elenco progetti e
reltivi tasks ordinati
alfabeticamente
Visualizza elenco
progetti e reltivi tasks in
Base all’ordinamento scelto
Seleziona un particolare
progetto o task
[assegnatario] [non assegnatario] Carica informazioni progetto
o task selezionato
Visualizza informazioni
richieste
Inserisci Inserisci files
commento
richiedi informazioni Carica elenco contatti
contatti
Visualizza elenco contatti Carica informazioni
Seleziona un contatto contatto selezionato
Visualizza informazioni
contatto
Esci dall’applicazione logout
45 Analisi dei requisiti
Figura 2.5: Diagramma di attività – Sviluppatore
2.2.3 Amministratore
L’utente amministratore, come accennato prima, ha la possibilità di sfruttare le funzionalità
messe a disposizione dello sviluppo ma è anche in grado di gestire un’ampia gamma di
processi aziendali che vengono considerati in questo applicativo. Grazie ad un diagramma dei
casi d’uso possiamo avere un’immediata sintesi (vedi figura 2.6).
inserimento e
catalogazione delle fatture emesse inserimento e
gestione dei dati di domino
«uses» suddivisione in task e «extends»
«uses» «extends» assegnamento dei
gestione dei task
creazione e task
stessi
gestione dei progetti
«uses» inserimento commento
relativo ad un task o ad un
«uses» progetto
«uses» inserimento e gestione di
«uses» file relativi ai task o ai
progetti
amministratore «uses»
«uses» inserimento e
gestione di usergroup
«uses»
«uses» consultazione della
lista della cose da fare
inerimento e
«uses» (ToDo)
gestione di nuovi prodotti
creazione e
gestione delle utenze
inserimento e
gestione dei contatti
Gestione ore «extends»
lavoro su task Figura 2.6: Requisiti funzionali – Amministratore
inserimento ore
«extends» visualizza ore degli
utenti "Sviluppatori" e
"Amministratori"
46 Analisi dei requisiti
Come si vede dal diagramma precedente, l’amministratore ha la possibilità di:
gestire i progetti e i relativi task in cui egli stesso suddividerà il progetto e distribuire
• allo sviluppo i vari task. (figura 2.7)
registrare e catalogare le fatture emesse ed avere un promemoria per emettere le
• fatture di progetti o task finiti (figura 2.8)
inserire e gestire domini e le e-mail, gli FTP, i sottodomini e i servizi correlati ad un
• dominio (figura 2.9)
inserire e gestire utenti del sistema (figura 2.10)
• inserire e gestire l’anagrafica dei contatti (figura 2.11)
• inserire e gestire gruppi di utenti (figura 2.12)
• inserire e gestire prodotti (figura 2.13)
• visualizzare le ore di lavoro di un qualsiasi utente registrato al sistema che faccia parte
• dello sviluppo, quindi amministratori e sviluppatori (figura 2.14)
gestire i file (figura 2.15)
•
Ribadiamo che l’utente Amministratore può anche avere accesso alle funzionalità studiate
prevalentemente per l’utente Sviluppatore in quanto egli stesso prende parte all’attività di
sviluppo le cui funzionalità sono già state descritte in precedenza.
Nelle pagine che seguono è stata inserita la raccolta di diagrammi di attività di ogni singolo
caso d’uso (vedi figure dalla 2.7 alla 2.15)
47 Analisi dei requisiti
Sistema
Amministratore
Accesso tramite login e password Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page
Accesso all’area Progetti
Visualizza pagina Progetti Crea pagina Crea menu’progetti
elenco progetti
Crea pagina progetti
Aggiungi progetto Salva dati
Seleziona un progetto Carica informazini
dall’elenco progetto
Visualizza informazioni
progetto
Modifica paramentri
progetto
Aggiungi task
Assegna task Manda in fatturazione Carica pagina fatturazione
Visualizza pagina
fatturazione
Inserisci dati fattura
Seleziona un task Carica informazini
dall’elenco task
Visualizza informazioni
task
Modifica task
Esci dall’applicazione logout
48 Analisi dei requisiti
Sistema
Amministratore
Figura 2.7: Diagramma di attività del caso d’uso Gestione Progetti
Accesso tramite login e password Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page
Accesso all’area Fatture
Visualizza pagina Fatture Crea pagina Crea menu’ fatture
elenco „In fatturazione“
Crea pagina Fatture
Seleziona un elemento Carica dati elemento
dall’elenco „in fatturazione“ selezionato Salva dati
Modifica dati
Seleziona un elemento Carica dati elemento
dall’elenco „fatturato“ selezionato
Visualizza dettagli
Richiedi l’ammontare Carica dati richiesti
del fatturato
Visualizza totale fatturato
Gestione fatture
Cancella fattura
Modifica fattura
Esci dall’applicazione logout
49 Analisi dei requisiti
Sistema
Amministratore
Figura 2.8: Diagramma di attività del caso d’uso Gestione Fatture
Access
o tram
ite login e pas
s
word Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page
Accesso all’area Domini
Visualizza pagina Domini Crea pagina Crea menu’ Domini
elenco Domini
Crea pagina Domini
Seleziona un elemento Carica dati elemento
dall’elenco Domini selezionato Salva dati
Visualizza servizi attivi
nel dominio selezionato
Aggiungi documenti dominio
Rinnova dominio
Gestione Domini
Cancella Dominio
Modifica Dominio
Inserisci nuovo Dominio
Gestione E-Mail
Cancella E-Mail
Modifica E-Mail
Inserisci nuovo E-Mail
Gestione FTP
Cancella FTP
Modifica FTP
Inserisci nuovo FTP
Gestione DataBase
Cancella DataBase
Modifica DataBase
Inserisci nuovo DataBase
Gestione Servizi
Cancella Servizi
Modifica Servizi
Inserisci nuovo Servizi
Esci dall’applicazione logout
50 Analisi dei requisiti
Figura 2.9: Diagramma di attività del caso d’uso Gestione Domini
Sistema
Amministratore
Accesso tramite login e password Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page
Accesso all’area Utenti
Visualizza pagina Utenti Crea pagina Crea menu’ Utenti
elenco Utenti
Crea pagina Utenti
Gestione Utenti Salva dati
Modifica Utente Cancella Utente
Seleziona un elemento Carica dati elemento
dall’elenco Utenti selezionato
Visualizza informazioni
dell’utente selezionato
Inserisci nuovo Utente
Richiedi elenco Carica lista richiesta
Utenti On-line
Visualizza elenco
degli Utenti On-Line
Scrivi E-mail da mandare Invia mail
agli Utenti
Esci dall’applicazione logout
51 Analisi dei requisiti
Sistema
Amministratore
Figura 2.10: Diagramma di attività del caso d’uso Gestione Utenti
Accesso tramite login e password Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page
Accesso all’area contatti
Visualizza pagina contatti Crea pagina Crea menu’ contatti
informazioni contati
Crea pagina contatti
Gestione contatti
Aggiungi contatto Salva dati
Seleziona un contatto Carica informazioni contatto
dall’elenco
Visualizza informazioni
contatto
Modifica contatto
Gestione banche
Aggiungi nuova banca
Modifica banche
Cancella banche
Gestione agenzie
Aggiungi nuova agenzia
Modifica agenzie
Cancella agenzia
Gestione agenti
Aggiungi nuovo agente
Modifica agenti
Cancella agente
Esci dall’applicazione logout
52 Analisi dei requisiti
Figura 2.11: Diagramma di attività del caso d’uso Gestione Contatti
Sistema
Amministratore
Accesso tramite login e password Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page
Accesso all’area Usergroup
Visualizza pagina Usergroup Crea pagina Crea menu’ Usergroup
Nuovo usergroup
Crea pagina Usergroup
Aggiungi nuovo usergroup
Seleziona gli utenti membri Salva dati
del nuovo usergroup
Gestisci usergroup
Visualizza elenco usergroup
Cancella Usergroup Modifica Usergroup
selezionato selezionato Carica informazioni utente
Seleziona utente selezionato
Visualizza informazioni utente
Esci dall’applicazione logout
53 Analisi dei requisiti
Figura 2.12: Diagramma di attività del caso d’uso Gestione Usergroup
Sistema
Amministratore
Accesso tramite login e password Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page
Accesso all’area Prodotti Crea pagina Crea menu’ prodotti
Nuovo prodotto
Visualizza pagina Prodotti Crea pagina Prodotti
Aggiungi nuovo prodotto Salva dati
Gestisci prodotti
Visualizza elenco prodotti
Cancella Prodotto Modifica Prodotto
selezionato selezionato
Esci dall’applicazione logout
54 Analisi dei requisiti
Figura 2.13: Diagramma di attività del caso d’uso Gestione Prodotti
Sistema
Amministratore
Accesso tramite login e password Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page
Accesso all’area Visualizza ore Accesso
diagramma
Utenti
Crea pagina Crea menu’ Utenti
Seleziona opzioni
interrogazione ore
Visualizza pagina Visualizza ore Crea pagina Visualizza ore
Seleziona opzioni Crea pagina risultato
interrogazione ore
Visualizza pagina risultato Carica pagina del progetto
Esci dall’applicazione Seleziona progetto o task o task selezionato
Accedi all’area progetto logout
Vedi
diagramma
sui progetti
55 Analisi dei requisiti
Figura 2.14: Diagramma di attività del caso d’uso Gestione Visualizza ore
Sistema
Amministratore
Accesso tramite login e password Autentica
al sistema
[non autenticato] [autenticato]
Errore di accesso Costruisci la home-page
Accesso all’area Files Crea pagina Crea menu’ Files
elenco Files
Visualizza pagina Files Crea pagina Files
Seleziona tipologia file Crea pagina risultato
Visualizza pagina risultato
Cancella file selezionato Salva dati
Scarica file selezionato
Seleziona utente Carica informazioni
utente selezionato
proprietario del file
Visualizza informazioni
utente selezionato
Esci dall’applicazione logout
56 Figura 2.15: Diagramma di attività del caso d’uso Gestione Files Analisi dei requisiti
2.3 Requisiti non funzionali
Tra i requisiti non funzionali dell’applicazione studiati insieme al committente c’è in primo
luogo l’usabilità del sistema: è stato studiato un modo per poter organizzare al meglio i menù
che permettevano all’utente l’accesso alle funzionalità dell’applicativo. Un occhio di riguardo
in merito è stato dato all’utente amministratore il quale, come visto precedentemente con il
diagramma dei casi d’uso, è l’attore che ha accesso al maggior numero di funzionalità. Per
risolvere la questione è stato pensato di interporre un menù di scelta intermedio tra il menù
principale e i menù specifici delle azioni, in modo tale che l’utente non dovesse scorrere con
la barra laterale gli innumerevoli menù che ogni funzionalità prevedeva.
L’interfaccia del sistema non utilizzerà frame HTML in quanto, come vedremo in seguito, è
stato scelto di strutturare per la View dell’applicazione una pagina utilizzando la tecnica del
pattern Master Template infatti le pagine dell’applicazione vengono costruite dinamicamente
(attraverso degli include). Il sistema sarà accessibile con qualsiasi browser che sarà in grado
di leggere CSS un accorgimento che si è preferito adottare in quanto dà la possibilità di
caricare la pagina più velocemente essendo l’HTML più leggero e di poter cambiare il layout
del sito una volta sola evitando di modificare tutte le pagine. Si è scelto di sviluppare con il
linguaggio di script PHP sfruttando come base dati MySql in quanto questa configurazione
gira su un numero elevato di piattaforme rendendo il progetto facilmente portabile.
Per quanto riguarda invece le prestazioni dell’applicazione bisogna considerare che è stata
pensata per girare prevalentemente in una intranet quindi la velocità tipica di questa è di
100Mb/s che si traduce in una risposta quasi in tempo reale del sistema. Chiaramente se il
sistema viene montato su un provider che ha accesso ad internet il sistema risponderà in base
alla velocità che la linea di accesso permetterà di sostenere.
La sicurezza dell’applicazione viene garantita dalla possibilità di accedere al sistema solo
tramite una login e una password rilasciate solo ed esclusivamente dagli utenti amministratori
dell’applicazione. Le variabili di sessione, poi, impediscono accessi a pagine interne
attraverso l’url; anche la cifratura delle password all’interno della base di dati rendono
improbabile gli accessi non autorizzati.
57 Progettazione della user experience
3 Progettazione della user experience
E’ ora arrivato il momento, dopo aver descritto con i casi d’uso e diagrammi di attività i
requisiti dell’applicativo, di focalizzarci su questo nuovo concetto nella modellizzazione di
sistemi Web introducendo il modello dell’interfaccia utente (User experience model o
modello UX) nel processo di sviluppo di applicazioni Web. Il modello UX rappresenta una
vista completa sul sistema da un punto di vista particolare, ovvero quello delle schermate
definite per l’applicativo stesso. Le proprietà significative dal punto di vista architetturale
delle schermate e le relazioni di navigazione esistenti tra esse sono i principali elementi del
modello UX. Una schermata rappresenta qualcosa che viene presentato all’utente e contiene
sia l’infrastruttura standard dell’interfaccia, quali menù e controlli, sia i contenuti rilevanti per
il business. Contenuto è un termine generico per indicare le informazioni di business presenti
in una pagina web; un contenuto è una combinazione di elementi statici ed elementi dinamici.
E’ importante però non confondere il concetto di schermata con quello di pagina Web che,
quest’ultime, rappresentano il meccanismo utilizzato per costruire e produrre schermate.
Per questo elaborato si è scelto di costruire una schermata utilizzando un meccanismo lato
server con il linguaggio di script PHP; questo però verrà visto nel prossimo capitolo basato
appunto sull’implementazione. Il meccanismo di estensione di UML rende possibile
introdurre un nuovo tipo di modellizzazione attraverso l’uso della WAE (Web Application
Extension), che aggiunge, alla notazione base di UML, concetti e vincoli per permettere la
modellizzazione di elementi architetturali specifici per il Web.
Nella modellizzazione dell’applicativo oggetto dell’elaborato è stato sfruttato il formalismo
della WAE attraverso i tre stereotipi che, per il modello della UX, lo rappresentano ovvero:
<<screen>> che sarà l’elemento maggiormente presente per i motivi descritti in
precedenza;
<<screen compartment>> che si è deciso di utilizzare per migliorare la gestione delle
schermate utilizzando il pattern master templace come sottolineato in precedenza nei
requisiti non funzionali;
<<input form>> presenti anche esse in numero elevato essendoci molti form per
l’inserimento di dati nell’applicazione.
Per maggiori dettagli su questi tre stereotipi vedere l’appendice B.
Per poi caratterizzare e spiegare meglio ogni modello UX vengono sviluppati degli storybord
che vengono utilizzati per descrivere scenari di casi d’uso. Questo è possibile attraverso l’uso
58 Progettazione della user experience
di diagrammi si sequenza con l’obbiettivo finale di esprimere un utilizzo tipico del sistema
attraverso gli occhi dell’utente.
3.1 Venditore
Come in precedenza partiamo dall’utente venditore. Di seguito viene riportato l’operazione
che l’utente in questione è abilitato a fare e cioè la visualizzazione dei dati di dominio (vedi
figure 3.1 e 3.2)
Home page Venditore
OK Page
login Visualizza
informazioni
Visualizza lista dominio
domini selezionato
Menu’ Principale Pagina attiva
Figura 3.1 - User experience - Venditore
Home page Venditore page Lista domini Dominio selezionato
Venditore Naviga()
Login() Naviga()
richiedi lista domini Naviga()
seleziona un dominio dalla lista Naviga()
informazioni sul dominio selezionato
3.2 Storyboard – Venditore – visualizza dominio
59 Progettazione della user experience
3.2 Sviluppatore
Passiamo all’utente sviluppatore al quale vengono date maggiori possibilità di azione. Il
modello della UX descrive tutte le possibili schermate alle quali l’utente accederà (vedi figura
3.3)
Home page Valido anche per
utente
Amministratore Elenco di Task
assegnati allo
sviluppatore Inserimento
Sviluppatore ore
OK Page OK
login Visualizza lista Visualizza task
ToDo selezionato Form
Inserimento commenti OK
commenti e/o
file
Visualizza
Visualizza progetto o task
elenco progetti selezionato Form file
Menu’ Principale Pagina attiva OK
Visualizza Contiene l’elenco
calendario di tutti i progetti
ordinati per data
Visualizza
Visualizza lista informazioni
Contatti contatto
selezionato
Figura 3.3 - User experience - Sviluppatore
Il diagramma della UX viene poi dettagliato con gli storyboard delle operazioni che il menù
principale dell’utente Sviluppatore mette a disposizione (vedi figure dalla 3.4 alla 3.7)
Sviluppatore page Lista contatti Contatto selezionato
Home page
Sviluppatore
Naviga()
Login() Naviga()
richiedi lista contatti Naviga()
seleziona un contatto dalla lista Naviga()
informazioni sul contatto selezionato
3.4 Storyboard – Sviluppatore – seleziona contatto
60 Progettazione della user experience
Home page Form ore
Sviluppatore page Lista ToDo Task selezionato
Sviluppatore
Naviga()
Login() Naviga()
richiedi lista ToDo Naviga()
seleziona un Task dalla lista Naviga()
informazioni sul Task selezionato
Inserisci ore Naviga()
Compila form ore
Submit()
3.5 Storyboard – Sviluppatore – inserisci ore su task
Valido anche per
- Lista ToDo
- Calendario
Home page Form commenti
Sviluppatore page Elenco progetti Task selezionato
Sviluppatore
Naviga()
Login() Naviga()
richiedi elenco progetti Naviga()
seleziona un Task dalla lista Naviga()
informazioni sul Task selezionato
Inserisci commento Naviga()
Compila form commenti
Submit()
61 Progettazione della user experience
3.6 Storyboard – Sviluppatore – inserisci commento su task
Valido anche per
- Lista ToDo
- Calendario
Home page Form file
Sviluppatore page Elenco progetti Task selezionato
Sviluppatore
Naviga()
Login() Naviga()
richiedi elenco progetti Naviga()
seleziona un Task dalla lista Naviga()
informazioni sul Task selezionato
Inserisci file Naviga()
Compila form file
Submit()
3.7 Storyboard – Sviluppatore – inserisci file su task
3.3 Amministratore
Nello studio di questo utente si è volutamente evitato di inserire le attività che l’utente
amministratore e l’utente sviluppatore hanno in comune in modo tale da evitare ridondanze
inutili nei grafici. Nonostante ciò alcune schermate dell’utente sviluppatore vengono riportati
anche nell’utente che stiamo prendendo in considerazione infatti esistono dei passaggi
obbligati che non è possibile evitare e che, per dare un senso al diagramma, bisogna inserire.
Un esempio sono le liste dalle quali si seleziona l’elemento che successivamente verrà
modificato o cancellato. Si nota che, a differenza dei precedenti utenti, l’amministratore ha un
menù di selezione intermedio che permette all’utente di spostarsi da una funzionalità ad
un'altra in modo rapido, evitando in questo modo noiose barre di scorrimento che si
verrebbero a creare se tutte le funzionalità fossero accessibili fin dall’autenticazione.
62 Progettazione della user experience
A differenza di prima, essendo tante le operazioni svolte dall’amministratore, si è deciso di
sviluppare un diagramma delle schermate per ogni operazione che l’utente ha la possibilità di
fare, in modo da rendere i diagrammi maggiormente leggibili e chiari.
3.3.1 Gestione progetti
Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente
ha accesso una volta autenticati dal sistema per quanto riguarda la gestione dei progetti (vedi
figura 3.8 ).
Home page Amministratore
page
OK Inserimento
login nuovo progetto OK
Visualizza lista
Progetti
Menu’ Principale Menu’ Selezione Pagina attiva Inserimento
Visualizza nuovo task e
progetto OK
assegnamento
selezionato
Menu’ progetti Modifica o
cancella
Manda in OK
progetto
fatturazione Visualizza task Modifica o
del progetto cancella task OK
OK
Figura 3.8 - User experience - Amministratore – Gestione progetti
Il digramma della UX viene ora dettagliato e spiegato con gli storyboard che il sottomenù
progetti mette a disposizione. Verranno descritte le attività di inserimento, assegnazione,
modifica e cancellazione di progetti e task e l’operazione di mettere nella sezione
63 Progettazione della user experience
fatturazione, nello stato “in fatturazione” che spiegheremo in seguito, un progetto e/o un task.
(vedi figure dalla 3.9 alla 3.15).
Home page Amministratore page Lista progetti Form progetto
Amministratore
Naviga()
Login() Naviga()
richiedi lista progetti Naviga()
inserisci e assegna nuovo progetto Naviga()
compila form progetti
Submit()
conferma inserimento e invio mail al proprietario del progetto
3.9 Storyboard – Amministratore – inserisci nuovo progetto Form progetto
Amministratore page Lista progetti
Home page
Amministratore
Naviga()
Login() Naviga()
richiedi lista progetti Naviga()
modifica progetto Naviga()
compila form progetti
Submit()
conferma modifiche e invio mail al proprietario del progetto
3.11 Storyboard – Amministratore – modifica progetto
64 Progettazione della user experience
Form progetto
Amministratore page Lista progetti
Home page
Amministratore
Naviga()
Login() Naviga()
richiedi lista progetti Naviga()
modifica progetto Naviga()
cancella progetto Cancella()
Naviga()
3.12 Storyboard – Amministratore – cancella progetto Form task
Home page Amministratore page Lista progetti Progetto selezionato
Amministratore
Naviga()
Login() Naviga()
richiedi lista progetti Naviga()
seleziona un progetto Naviga()
informazioni sul progetto selezionato
aggiungi e assegna task al progetto Naviga()
compila form progetti
Submit()
conferma inserimento e invio mail al proprietario del task
3.10 Storyboard – Amministratore – inserisci e assegna un nuovo task
65 Progettazione della user experience
Task selezionato Form task
Amministratore page Lista progetti Progetto selezionato
Home page
Amministratore
Naviga()
Login() Naviga()
richiedi lista progetti Naviga()
seleziona un progetto Naviga()
seleziona task del progetto Naviga()
informazioni sul task selezionato
modifica task selezionato Naviga()
compila form task
Submit()
conferma inserimento e invio mail al proprietario del task
3.13 Storyboard – Amministratore – modifica task Task selezionato
Amministratore page Lista progetti Progetto selezionato
Home page
Amministratore
Naviga()
Login() Naviga()
richiedi lista progetti Naviga()
seleziona un progetto Naviga()
seleziona task del progetto Naviga()
informazioni sul task selezionato
cancella task selezionato Cancella()
Naviga()
3.14 Storyboard – Amministratore – cancella task
66 Progettazione della user experience
Amministratore page Lista progetti Progetto selezionato Form fatturazione
Home page
Amministratore
Naviga()
Login() Naviga()
richiedi lista progetti Naviga()
seleziona un progetto Naviga()
Manda in fatturazione progetto o singoli task Naviga()
compila form fatture
Submit()
conferma inserimento fattura
3.15 Storyboard – Amministratore – manda in fatturazione
67 Progettazione della user experience
3.3.2 Gestione fatture
Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente
ha accesso una volta autenticati al sistema per quanto riguarda la gestione delle fatture (vedi
figura 3.16 ).
Home page Amministratore
page
OK Visualizza Form fattura
lista „In
login OK
Fatturazione“
Lista di fatture nei
due possibili stati Visualizza Modifica
elenco fatture fattura OK
Menu’ Principale Menu’ Selezione Pagina attiva Visualizza Cancella
lista totale fattura
fatturato
Menu’ fatture Visualizza
Visualizza dettagli
lista „Fatturato“
Figura 3.16 - User experience - Amministratore – Gestione fatture
La sezione di fatturazione serve all’amministratore per registrare tutte le fatture emesse, che
vengono inserite nella sezione di applicativo accessibile mediante la lista “fatturato”, e serve
anche come promemoria per ricordarsi di fatturare quei progetti che, trovandosi nello lista “in
fatturazione”, non sono ancora stati fatturati. Ovviamente è messa a disposizione dell’utente
la possibilità di vedere l’ammontare del fatturato in un determinato periodo di tempo e di
modificare o cancellare una fattura, o anche il promemoria di fatturazione, se ci si accorge di
errori nella registrazione. Dettagliamo mediante storyboard queste operazioni appena
descritte accessibili mediante il sottomenù fatture. (vedi figure dalla 3.17 alla 3.21)
68 Progettazione della user experience
Home page Amministratore page Lista "in fatturazione" Fattura selezionata Form fattura
Amministratore
Naviga()
Login() Naviga()
richiedi lista stato "in fatturazione" Naviga()
seleziona fattura Naviga()
manda nello stato "fatturato" Naviga()
compila form fattura
Submit()
conferma dati inseriti correttamente
3.17 Storyboard – Amministratore – poni nello stato “fatturato”
Amministratore page Lista "fatturato" Fattura selezionata Dettaglio fattura
Home page
Amministratore
Naviga()
Login() Naviga()
richiedi lista stato "fatturato" Naviga()
seleziona fattura Naviga()
richiedi dettaglio fattura Naviga()
visualizza dettaglio fattura
3.18 Storyboard – Amministratore – visualizza dettaglio fattura in stato “fatturato”
69 Progettazione della user experience
Home page Amministratore page Lista fatture Form fattura
Amministratore
Naviga()
Login() Naviga()
richiedi lista fatture Naviga()
seleziona fattura
modifica fattura Naviga()
compila form fattura
Submit()
3.19 Storyboard – Amministratore – modifica fattura
Amministratore page Lista fatture
Home page
Amministratore
Naviga()
Login() Naviga()
richiedi lista fatture Naviga()
cancella fattura Cancella()
3.20 Storyboard – Amministratore – cancella fattura
70 Progettazione della user experience
Amministratore page Totale fatturato
Home page
Amministratore
Naviga()
Login() Naviga()
richiedi totale fatturato in un periodo selezionato Naviga()
visualizza totale fatturato
3.21 Storyboard – Amministratore – visualizza totale fatturato
71 Progettazione della user experience
3.3.3 Gestione domini
Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente
ha accesso una volta autenticati al sistema per quanto riguarda la gestione dei domini (vedi
figura 3.22 ). Visualizza Inserisci
Visualizza informazioni documenti
Home page elenco domini dominio OK
dominio
selezionato Cancella
Modifica o documenti
Cancella
Rinnova dominio
Amministratore
page
OK Inserisci nuovo
dominio
login OK
Inserisci nuova OK
Menu’ Principale Menu’ Selezione Pagina attiva Inserisci nuovo
FTP OK
Seleziona
Menu’ domini dominio Inserisci nuovo
DataBase OK
Inserisci nuovo
Sottodomio OK
Modifica o Modifica o Modifica o
Modifica o
Modifica o cancella cancella cancella Inserisci nuovo
cancella FTP
cancella E-mail DataBase Sottodomini Servizi Servizio OK
OK
OK OK OK OK
Figura 3.22 - User experience - Amministratore – Gestione domini
Questa sezione dell’applicativo mette a disposizione dell’amministratore la possibilità di
inserire, modificare e cancellare informazioni di un dominio. Inoltre le stesse operazioni
possono essere applicate anche alle e-Mail, agli FTP, ai database, ai sottodomini e ad altri
servizi che ogni dominio possiede. C’è inoltre un collegamento anche con la fatturazione
anche in questo caso in quanto è prevista l’operazione di rinnovo che permette di mandare
nello stato “in fatturazione” il dominio in fase di scadenza. Infine è possibile salvare
72 Progettazione della user experience
all’interno dell’area dedicata ad un dominio i propri documenti. Tutto questo descritto in
dettaglio nei seguenti storyboard. (vedi figure dalla 3.23 alla 3.42)
Home page Amministratore page Form nuovo dominio
Amministratore
Naviga()
Login() Naviga()
inserisci nuovo dominio Naviga()
compila form nuovo dominio
Submit()
conferma dati inseriti correttamente
3.23 Storyboard – Amministratore – inserisci nuovo dominio
Home page Amministratore page Lista domini Dominio selezionato Form dominio
Amministratore
Naviga()
Login() Naviga()
richiedi lista domini Naviga()
seleziona dominio Naviga()
modifica / rinnova dominio Naviga()
compila form dominio
Submit()
conferma dati inseriti correttamente
3.24 Storyboard – Amministratore – modifica e rinnova dominio
73 Progettazione della user experience
Home page Amministratore page Lista domini
Amministratore
Naviga()
Login() Naviga()
richiedi lista domini Naviga()
seleziona dominio
cancella dominio Cancella()
3.25 Storyboard – Amministratore – cancella dominio
Home page Amministratore page Lista domini Dominio selezionato Form documenti
Amministratore
Naviga()
Login() Naviga()
richiedi lista domini Naviga()
seleziona dominio Naviga()
richiedi inserimento documenti dominio Naviga()
inserisci file documeti del dominio
Submit()
conferma dati inseriti correttamente
3.26 Storyboard – Amministratore – inserisci documento dominio
74 Progettazione della user experience
Home page Amministratore page Lista domini Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
richiedi lista domini Naviga()
seleziona dominio Naviga()
richiedi cancellazione documenti dominio Cancella()
3.27 Storyboard – Amministratore – cancella documento dominio
Form nuova E-Mail
Home page Amministratore page Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all'area e-mail
seleziona dominio Naviga()
inserisci nuova E -Mail Naviga()
compila form nuova e-mail
Submit()
conferma dati inseriti correttamente
3.28 Storyboard – Amministratore – inserisci nuova E-Mail
75 Progettazione della user experience
Home page Amministratore page Form E-Mail
Dominio selezionato Lista E-Mail
Amministratore
Naviga()
Login() Naviga()
accesso all'area e-mail
seleziona dominio Naviga()
richiedi lista E -Mail Naviga()
seleziona E-Mail da modificare Naviga()
compila form e-mail
Submit()
conferma dati inseriti correttamente
3.29 Storyboard – Amministratore – modifica E-Mail
Home page Amministratore page Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all 'area e-mail
seleziona dominio Naviga()
seleziona E-Mail da cancellare Cancella()
3.30 Storyboard – Amministratore –cancella E-Mail
76 Progettazione della user experience
Form nuovo FTP
Home page Amministratore page Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all 'area FTP
seleziona dominio Naviga()
inserisci nuova FTP Naviga()
compila form nuova FTP
Submit()
conferma dati inseriti correttamente
3.31 Storyboard – Amministratore – inserisci nuovo FTP
Home page Amministratore page Form FTP
Dominio selezionato Lista FTP
Amministratore
Naviga()
Login() Naviga()
accesso all 'area FTP
seleziona dominio Naviga()
richiedi lista FTP Naviga()
seleziona FTP da modificare Naviga()
compila form FTP
Submit()
conferma dati inseriti correttamente
3.32 Storyboard – Amministratore – modifica FTP
77 Progettazione della user experience
Home page Amministratore page Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all'area FTP
seleziona dominio Naviga()
seleziona FTP da cancellare Cancella()
3.33 Storyboard – Amministratore –cancella FTP Form nuovo DataBase
Home page Amministratore page Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all'area DataBase
seleziona dominio Naviga()
inserisci nuovo DataBase Naviga()
compila form nuova DataBase
Submit()
conferma dati inseriti correttamente
3.34 Storyboard – Amministratore – inserisci nuovo DataBase
78 Progettazione della user experience
Home page Amministratore page Lista DataBase Form DataBase
Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all 'area DataBase
seleziona dominio Naviga()
richiedi lista DataBase Naviga()
seleziona DataBase da modificare Naviga()
compila form DataBase
Submit()
conferma dati inseriti correttamente
3.35 Storyboard – Amministratore – modifica DataBase
Home page Amministratore page Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all 'area DataBase
seleziona dominio Naviga()
seleziona DataBase da cancellare Cancella()
3.36 Storyboard – Amministratore –cancella DataBase
79 Progettazione della user experience
Form nuovo sottodominio
Home page Amministratore page Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all 'area sottodomini
seleziona dominio Naviga()
inserisci nuova sottodomini Naviga()
compila form nuovo sottodominio
Submit()
conferma dati inseriti correttamente
3.37 Storyboard – Amministratore – inserisci nuovo sottodominio
Home page Amministratore page Lista sottodomini Form sottodominio
Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all 'area sottodomini
seleziona dominio Naviga()
richiedi lista sottodomini Naviga()
seleziona sottodominio da modificare Naviga()
compila form sottodominio
Submit()
conferma dati inseriti correttamente
3.38 Storyboard – Amministratore – modifica sottodominio
80 Progettazione della user experience
Home page Amministratore page Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all 'area sottodomini
seleziona dominio Naviga()
seleziona sottodominio da cancellare Cancella()
3.39 Storyboard – Amministratore –cancella sottodominio Form nuova servizi
Home page Amministratore page Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all 'area servizi
seleziona dominio Naviga()
inserisci nuovo servizio Naviga()
compila form nuovo servizio
Submit()
conferma dati inseriti correttamente
3.40 Storyboard – Amministratore – inserisci nuovo servizio
81 Progettazione della user experience
Home page Amministratore page Dominio selezionato Lista servizi Form servizio
Amministratore
Naviga()
Login() Naviga()
accesso all 'area servizi
seleziona dominio Naviga()
richiedi lista servizi Naviga()
seleziona servizio da modificare Naviga()
compila form servizio
Submit()
conferma dati inseriti correttamente
3.41 Storyboard – Amministratore – modifica servizio
Home page Amministratore page Dominio selezionato
Amministratore
Naviga()
Login() Naviga()
accesso all'area servizi
seleziona dominio Naviga()
seleziona servizio da cancellare Cancella()
3.42 Storyboard – Amministratore – cancella servizio
82 Progettazione della user experience
3.3.4 Gestione utenti
Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente
ha accesso una volta autenticati al sistema per quanto riguarda la gestione degli utenti (vedi
figura 3.43 ).
Home page Cancella
Visualizza lista Modifica
Amministratore Utenti utente
page
OK OK
login Inserisci nuovo
utente OK
Visualizza
Visualizza utente
Menu’ Principale Menu’ Selezione Pagina attiva utenti on-line
Invio E-Mail OK
Menu’ utenti
Figura 3.43 - User experience - Amministratore – Gestione utenti
Una semplice gestione degli utenti che prevede l’inserimento, la modifica e la cancellazione
di utenti dal sistema che, come sottolineato in precedenza, è l’unico modo per accedere al
sistema. Per far parte degli utenti registrati a questa applicazione non esiste altro modo che
richiedere l’iscrizione ad un amministratore del sistema. Inoltre dai seguenti storyboard si
vedrà come, tramite il sottomenù utenti, sia possibile vedere la lista degli utenti in quel
momento on-line o avere la possibilità di mandare a tutti gli utenti o ad un solo gruppo
(usergroup) di essi una e-mail pensato come un servizio di mailing-list. (vedi figure dalla 3.44
alla 3.48)
83 Progettazione della user experience
Form nuovo utente
Home page Amministratore page
Amministratore
Naviga()
Login() Naviga()
richiedi inserimento nuovo utente Naviga()
compila form utente
Submit()
conferma inserimento dati corretto
3.44 Storyboard – Amministratore – inserisci nuovo utente
Home page Amministratore page Lista utenti Utente selezionato Form utente
Amministratore
Naviga()
Login() Naviga()
richiedi lista utenti Naviga()
seleziona un utente dalla lista Naviga()
modifica utente Naviga()
compila form utente
Submit()
conferma inserimento dati corretto
3.45 Storyboard – Amministratore – modifica utente
84 Progettazione della user experience
Home page Amministratore page Lista utenti
Amministratore
Naviga()
Login() Naviga()
richiedi lista utenti Naviga()
seleziona utente da cancellare Cancella()
3.46 Storyboard – Amministratore – cancella utente
Utenti on-line Utente
Home page Amministratore page
Amministratore
Naviga()
Login() Naviga()
richiedi lista utenti on-line Naviga()
visualizza lista utenti on -line
seleziona un utente dalla lista Naviga()
visualizza dettagli utente
3.47 Storyboard – Amministratore – visualizza utenti on-line e dettaglio utente
85 Progettazione della user experience
Form invio e-mail
Home page Amministratore page
Amministratore
Naviga()
Login() Naviga()
richiedi invio e -mail Naviga()
compila form invio e-mail
Submit()
conferma invio effetuato con successo
3.48 Storyboard – Amministratore – invia e-mail agli utenti
86 Progettazione della user experience
3.3.5 Gestione contatti
Di seguito è presentato il diagramma della UX che comprende tutte le schermate a cui l’utente
ha accesso una volta autenticati al sistema per quanto riguarda la gestione dei contatti (vedi
figura 3.49 ). Cancella
Home page preventivo
Visualizza
informazioni
Visualizza lista Inserisci
contatto
Contatti Preventivo OK
selezionato
Amministratore
page
OK Modifica o
Inserisci nuovo cancella
contatto
login OK OK
contatto
Inserisci nuova
agenzia OK
Menu’ Principale Menu’ Selezione Pagina attiva Modifica
Visualizza agenzia
elenco agenzie OK
Cancella
Inserisci nuovo banca
Menu’ contatti OK
agente Modifica
Visualizza agente
elenco agenti OK
Cancella
Inserisci nuovo agenzia
OK
agente Modifica
Visualizza agente
elenco agenti OK
Cancella
agente
Figura 3.49 - User experience - Amministratore – Gestione contatti
L’applicativo mette a disposizione dell’utente la possibilità di inserire, modificare e cancellare
i contatti di un azienda gestendo anche per ogni contatto i preventivi fatti ad ogni singolo
contatto. Inoltre per ogni contatto è prevista la possibilità di inserire un numero di banche a
piacere ad esso collegato, di assegnargli un agente esterno o interno all’azienda che ha fornito
il lavoro e al quale il contatto fa riferimento, inoltre c’è una gestione delle agenzie esterne che
cooperano con l’azienda e forniscono nuovi contatti ai quali gli agenti appartengono.
87 Progettazione della user experience
Ovviamente, come si vedrà dai prossimi storyboard, oltre all’inserimento c’è la possibilità di
modifica e di cancellazione di banche, agenti e agenzie. (vedi figure dalla 3.50 alla 3.63)
Home page Amministratore page Form nuovo contatto
Amministratore
Naviga()
Login() Naviga()
richiedi inserimento nuovo contatto Naviga()
compila form contatto
Submit()
conferma inserimento dati corretto
3.50 Storyboard – Amministratore – inserisci nuovo contatto
Home page Amministratore page Lista contatti Contatto selezionato Form contatto
Amministratore
Naviga()
Login() Naviga()
richiedi lista contatti Naviga()
seleziona un contatto dalla lista Naviga()
visualizza informazioni contatto selezionato
modifica contatto Naviga()
compila form contatto
Submit()
conferma inserimento dati corretto
3.51 Storyboard – Amministratore – modifica contatto selezionato
88 Progettazione della user experience
Home page Amministratore page Lista contatti
Amministratore
Naviga()
Login() Naviga()
richiedi lista contatti Naviga()
seleziona contatto da cancellare Cancella()
3.52 Storyboard – Amministratore – cancella contatto selezionato
Home page Amministratore page Lista contatti Contatto selezionato Form preventivo
Amministratore
Naviga()
Login() Naviga()
richiedi lista contatti Naviga()
seleziona un contatto dalla lista Naviga()
inserisci il file di preventivo Naviga()
compila form preventivo
Submit()
conferma inserimento dati corretto
3.53 Storyboard – Amministratore – inserisci file di preventivo
89 Progettazione della user experience
Home page Amministratore page Lista contatti Contatto selezionato
Amministratore
Naviga()
Login() Naviga()
richiedi lista contatti Naviga()
seleziona un contatto dalla lista Naviga()
cancella il file di preventivo Cancella()
3.54 Storyboard – Amministratore – cancella file di preventivo
Home page Amministratore page Form nuova banca
Amministratore
Naviga()
Login() Naviga()
richiedi inserimento nuova banca Naviga()
compila form nuova banca
Submit()
conferma inserimento dati corretto
3.55 Storyboard – Amministratore – inserisci nuova banca
90 Progettazione della user experience
Home page Amministratore page Lista banche Banca selezionata Form banca
Amministratore
Naviga()
Login() Naviga()
richiedi lista banche Naviga()
seleziona una banca dalla lista Naviga()
modifica banca Naviga()
compila form banca
Submit()
conferma inserimento dati corretto
3.56 Storyboard – Amministratore – modifica banca
Home page Amministratore page Lista banche
Amministratore
Naviga()
Login() Naviga()
richiedi lista banche Naviga()
seleziona banca da cancellare Cancella()
3.57 Storyboard – Amministratore – cancella banca
91 Progettazione della user experience
Home page Amministratore page Form nuova agenzia
Amministratore
Naviga()
Login() Naviga()
richiedi inserimento nuova agenzia Naviga()
compila form nuova agenzia
Submit()
conferma inserimento dati corretto
3.58 Storyboard – Amministratore – inserisci nuova agenzia
Home page Amministratore page Lista banche Agenzia selezionata Form agenzia
Amministratore
Naviga()
Login() Naviga()
richiedi lista agenzie Naviga()
seleziona un'agenzia dalla lista Naviga()
modifica agenzia Naviga()
compila form agenzia
Submit()
conferma inserimento dati corretto
3.59 Storyboard – Amministratore – modifica agenzia
92 Progettazione della user experience
Home page Amministratore page Lista agenzie
Amministratore
Naviga()
Login() Naviga()
richiedi lista agenzie Naviga()
seleziona agenzia da cancellare Cancella()
3.60 Storyboard – Amministratore – cancella agenzia
Home page Amministratore page Form nuovo agente
Amministratore
Naviga()
Login() Naviga()
richiedi inserimento nuovo agente Naviga()
compila form nuovo agente
Submit()
conferma inserimento dati corretto
3.61 Storyboard – Amministratore – inserisci nuovo agente
93 Progettazione della user experience
Home page Amministratore page Lista banche Agente selezionato Form agente
Amministratore
Naviga()
Login() Naviga()
richiedi lista agenti Naviga()
seleziona un agente dalla lista Naviga()
modifica agente Naviga()
compila form agente
Submit()
conferma inserimento dati corretto
3.62 Storyboard – Amministratore – modifica agente
Home page Amministratore page Lista agenti
Amministratore
Naviga()
Login() Naviga()
richiedi lista agenti Naviga()
seleziona agente da cancellare Cancella()
3.63 Storyboard – Amministratore – cancella agente
94 Progettazione della user experience
3.3.6 Gestione usergroup
Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente
ha accesso una volta autenticati al sistema per quanto riguarda la gestione degli usergroup
(vedi figura 3.64 ).
Home page Amministratore
page
OK
login Inserisci nuovo
usergroup OK
Menu’ Principale Menu’ Selezione Pagina attiva Visualizza Modifica
elenco usergroup OK
usergroups
Menu’ Cancella
usergroups Utente usergroup
Figura 3.64 - User experience - Amministratore – Gestione usergroup
Per organizzare gli utenti in gruppi è stata prevista questa sezione nella quale si possono
inserire, modificare e cancellare usergroup. Queste funzionalità sono accessibili dal
sottomenù usergroups che sono caratterizzati da un nome e dalla lista degli utenti registrati
all’applicazione e che si vogliono in qualche modo raggruppare. Vediamo attraverso gli
storyboard come tutto questo avviene. (vedi figure dalla 3.65 alla 3.68)
95 Progettazione della user experience
Home page Amministratore page Form nuovo usergroup
Amministratore
Naviga()
Login() Naviga()
richiedi inserimento nuovo usergroup Naviga()
compila form nuovo usergroup
Submit()
conferma inserimento dati corretto
3.65 Storyboard – Amministratore – inserisci nuovo usergroup
Home page Amministratore page Lista usergroup Usergroup selezionato Form usergroup
Amministratore
Naviga()
Login() Naviga()
richiedi lista usergroup Naviga()
seleziona uno usergroup dalla lista Naviga()
modifica usergroup Naviga()
compila form usergroup
Submit()
conferma inserimento dati corretto
3.66 Storyboard – Amministratore – modifica usergroup
96 Progettazione della user experience
Home page Amministratore page Lista usergroup
Amministratore Naviga()
Login() Naviga()
richiedi lista usergroup Naviga()
seleziona usergroup da cancellare Cancella()
3.67 Storyboard – Amministratore – cancella usergroup
Home page Amministratore page Lista usergroup Utente
Amministratore Naviga()
Login() Naviga()
richiedi lista usergroup Naviga()
seleziona utente Naviga()
Visualizza dettaglio utente
3.68 Storyboard – Amministratore – Visualizza informazioni utente
97 Progettazione della user experience
3.3.7 Gestione prodotti
Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente
ha accesso una volta autenticati al sistema per quanto riguarda la gestione dei prodotti (vedi
figura 3.64 ).
Home page Amministratore
page
OK
login Inserisci nuovo
prodotto OK
Menu’ Principale Menu’ Selezione Pagina attiva Modifica
Visualizza prodotto
elenco prodotti OK
Menu’ prodotti Cancella
prodotto
Figura 3.69 - User experience - Amministratore – Gestione prodotti
Essendo molti i prodotti che l’azienda fornisce si è deciso di dedicargli una sezione nella
quale vengono inseriti, modificati e cancellati. Ogni progetto poi sarà identificato, oltre da un
identificativo nella base dati, dal binomio contatto + prodotto. Anche in questo caso
aiutiamoci con gli storyboard. (vedi figure dalla 3.70 alla 3.72)
98 Progettazione della user experience
Home page Amministratore page Lista prodotti Prodotto selezionato Form prodotto
Amministratore
Naviga()
Login() Naviga()
richiedi lista prodotti Naviga()
seleziona un prodotti dalla lista Naviga()
modifica prodotto Naviga()
compila form prodotto
Submit()
conferma inserimento dati corretto
3.70 Storyboard – Amministratore – modifica prodotti
Home page Amministratore page Form nuovo prodotto
Amministratore
Naviga()
Login() Naviga()
richiedi inserimento nuovo prodotto Naviga()
compila form nuovo prodotto
Submit()
conferma inserimento dati corretto
3.71 Storyboard – Amministratore – inserisci nuovo prodotto
99 Progettazione della user experience
Home page Amministratore page Lista prodotti
Amministratore Naviga()
Login() Naviga()
richiedi lista prodotti Naviga()
seleziona prodotto da cancellare Cancella()
3.72 Storyboard – Amministratore – cancella prodotto
3.3.8 Gestione ore di sviluppo
Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente
ha accesso una volta autenticati al sistema per quanto riguarda la gestione delle ore di
sviluppo (vedi figura 3.73 ).
Home page Amministratore
page
OK
login I paramentri sono
-nome utente
-progetto
-range di date
Inserisci
parametri
visualizzazione OK
ore
Menu’ Principale Menu’ Selezione Pagina attiva Visualizza ore
Menu’ contatti
Figura 3.73 - User experience - Amministratore – Gestione ore di sviluppo
100 Progettazione della user experience
Con questa semplice operazione, che prevede un solo storyboard, l’amministratore riesce ad
avere delle informazioni molto utili all’azienda sul monitoraggio dello sviluppo. (vedi figura
3.74) Home page Amministratore page Form visualizza ore
Amministratore
Naviga()
Login() Naviga()
richiedi lista ore Naviga()
compila form visualizza ore
Submit()
visualizza ore in base ai parametri richiesti
3.74 Storyboard – Amministratore – richiedi lista ore
101 Progettazione della user experience
3.3.9 Gestione files
Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente
ha accesso una volta autenticati al sistema per quanto riguarda la gestione dei file (vedi figura
3.75 ).
Home page Amministratore
page
OK
login Download file
Visualizza
informazioni
Visualizza utente proprietario
elenco file file
Menu’ Principale Menu’ Selezione Pagina attiva Cancella file
Menu’ file
Figura 3.75 - User experience - Amministratore – Gestione files
Questa funzionalità prevede principalmente la possibilità di scaricare e cancellare tutti i file
contenuti all’interno dell’applicativo compresi documenti di dominio, preventivi dei contatti e
file di ogni genere salvati all’interno della sezione dedicata nei progetti. Inoltre, come
sottolineeranno i prossimi storyboard, ci sarà la possibilità di visualizzare informazioni
sull’utente proprietario di un file. (vedi figure dalla 3.76 alla 3.78)
102 Progettazione della user experience
Home page Amministratore page Lista file
Amministratore
Naviga()
Login() Naviga()
richiedi lista file Naviga()
seleziona un file da scaricare Download()
3.76 Storyboard – Amministratore – scarica un file dall’elenco
Home page Amministratore page Lista file Utente selezionato
Amministratore
Naviga()
Login() Naviga()
richiedi lista file Naviga()
seleziona un utente proprietario di un file Naviga()
visualizza informazioni utente selezionato
3.77 Storyboard – Amministratore – visualizza informazioni utente
103 Progettazione della user experience
Home page Amministratore page Lista file
Amministratore
Naviga()
Login() Naviga()
richiedi lista file Naviga()
seleziona un file da cancellare Cancella()
3.78 Storyboard – Amministratore – cancella file
104 Progettazione della user experience
3.4 Schermate
Inseriamo ora qualche schermata dell’applicativo per mostrarne il layout di impaginazione
che verranno presentati all’utente.
Iniziamo con l’immagine di seguito che rappresenta la Home-page del sistema comune a tutti
gli utenti e dalla quale si è grado di autenticarsi al sistema. (vedi figura 3.79)
Figura 3.79: Schermata – Login
105 Progettazione della user experience
Passiamo successivamente alla schermata che l’utente venditore vedrà una volta autenticato.
Si riesce a vedere l’elenco dei domini ai quali ha accesso, ciccandoci sopra, per vedere le
informazioni sulle caratteristiche aggiuntive di ogni dominio. Inoltre di riesce a notare la
possibilità di poter ricercare un dominio in base al contatto. (vedi figura 3.80)
Figura 3.80: Schermata – Venditore
106 Progettazione della user experience
Questa immagine invece rappresenta quello che vedrà l’utente Sviluppatore una volta
autenticato al sistema e cioè la lista “ToDo” dei lavori ad esso assegnati oltre alla possibilità
di vedere l’insieme dei lavori di un particolare usergroup. Inoltre si nota il menù principale
delle operazioni concesse a questo utente. Simile sarà anche la schermata della lista “ToDo”
dell’utente Amministratore, ma ci sarà in più il sottomenù di selezione. (vedi figura 3.81)
Figura 3.81: Schermate – Sviluppatore
107 Progettazione della user experience
Un’importante strumento messo a disposizione dello sviluppo è il calendario, nel quale
vengono riportati i task dei progetti assegnati all’utente che ha appena effettuato
l’autenticazione, quelli di un altro utente e anche quelli di un usergroup selezionato. (vedi
figura 3.82) Figura 3.82: Schermate – Calendario
108 Progettazione della user experience
Quanto riportato nella figura sottostante è quanto viene mostrato all’utente Amministratore
dopo l’operazione di autenticazione. Come si nota viene visualizzata la lista dei progetti con i
relativi task. Alla sinistra della pagina si notano il menù principale, il menù di selezione e il
sottomenù dei progetti. (vedi figura 3.83)
Figura 3.83: Schermate – Lista progetti
109 Progettazione della user experience
Vediamo con la schermata che segue come viene proposto il dettaglio di un progetto
all’utente Amministratore che come si nota ha la possibilità di modificarlo (edit), di
aggiungere un attività e di mandare il fatturazione l’intero progetto. Inoltre si notano le
sezioni dell’applicativo per l’inserimento di commenti e di file
Figura 3.84: Schermate – Dettaglio progetto
110 Progettazione della user experience
Vediamo anche come vengono visualizzate le informazioni dei contatti e i menù visualizzati
in questa sezione. Si nota la possibilità di aggiunta di progetti, domini e banche al profilo del
contatto; inoltre c’è una sezione dedicata ai preventivi che quindi sono subito reperibili per
ogni contatto. (vedi figura 3.85)
Figura 3.85 Schermate – Informazioni contatto
111 Progettazione della user experience
La seguente schermata visualizza il risultato dell’interrogazione fatta per visualizzare il
numero di ore di lavoro, per ogni progetto, di un determinato utente. (vedi figura 3.86)
Figura 3.86 Schermate – Informazioni contatto
112 Progettazione della user experience
Viene presentato ora un esempio di form per l’inserimento di dati. In questo specifico caso ci
si sta occupando dell’inserimento dei dati relativi ad un nuovo dominio. Molteplici altri form
vengono utilizzati nel progetto. (vedi figura 3.87)
Figura 3.87 Schermate – form aggiungi dominio
113 Progettazione della user experience
Infine, in questa schermata, viene presentata un esempio di gestione di dati che, nello
specifico, sono dati relativi agli utenti. Come si può notare il sistema dà la possibilità di
cancellare e di modificare (edit) i dati. Una gestione simile avviene anche per prodotti e
usergroup. Figura 3.88 Schermate – Gestione utenti
Le schermate dell’applicativo sono molte di più di quelle che abbiamo visto in questo
sottocapitolo, infatti si è scelto di mostrare le più significative per dare un’idea di come è stato
strutturato l’applicativo e di come sono i layout di impaginazione.
114 Progettazione dell’implementazione
4 Progettazione dell’implementazione
Organizzare la progettazione dell’implementazione di un sito significa aggiungere al modello
di analisi i dettagli che permettono l’implementazione dei componenti fisici previsti
dall’architettura software.
Per ottenere questo obbiettivo si devono quindi stabilire le tipologie di pagine (client, server,
form) che si adotteranno nell’ implementare, le funzionalità del sito e determinare le
operazioni svolte a lato server e a lato client. Anche per questo tipo di formalismo
l’estensione per il Web (WAE) che abbiamo incontrato anche nel precedente capitolo ci viene
in aiuto con altri tre tipi di stereotipi fondamentali nella progettazione dell’implementazione
di un applicativo web-oriented. Gli stereotipi che si utilizzano sono:
<<server page>> che rappresenta una pagina Web che ha contenuti costruiti dal server a
ogni richiesta.
<<client page>> che rappresenta una pagina Web formattata in HTML ed è un misto di
dati, presentazione e persino logica applicativa interpretabile dal browser.
<<form HTML>> sono un insieme di campi di input che sono parte di una pagina client.
<<static page component >> che rappresenta la pagina statica che il browser richiede al
web-server
<<dynamic page component>> che rappresenta la pagina dinamica che, a seguito di una
richiesta da parte del browser, fa partire un’elaborazione sul server.
Per maggiori dettagli su questi tre stereotipi vedere l’appendice B.
Sfrutteremo questi stereotipi e le conseguenti classi stereotipate rappresentandoli mediante dei
diagrammi logici e dei componenti che caratterizzeranno questo capitolo.
Essi servono a dare una visualizzazione logica di come sarà strutturata l’applicazione e quali
sono alcune delle pagine che faranno parte dell’implementazione del progetto. Anche in
questo caso ci verranno in aiuto per una migliore comprensione, dei diagrammi di sequenza
che serviranno per capire meglio cosa succede nel sistema quando si fanno determinate
operazioni, e come le pagine interagiscono tra di loro per arrivare alla presentazione delle
schermate della User Experience descritta nel capitolo precedente. Parlando di
implementazione è necessario modellizzare la base dati con il formalismo del diagramma
Entità – Relazione che verrà preceduto da una minima descrizione appunto delle relazioni tra
le entità che l’applicativo prevede.
115 Progettazione dell’implementazione
Visto il grande numero di funzionalità che sono state richieste si è deciso di sviluppare una
subversion in base ai risultati ottenuti dallo studio dell’arte dei sistemi CSCW.
L’azienda Blumade s.a.s è una Software House di piccole dimensioni quindi, in base alle
conclusioni viste nel sottocapitolo 1.5, si è deciso di sviluppare una subversion a partire dal
tool WebCollab, un prodotto open source liberamente accessibile e modificabile.
Per questo sistema è stato utilizzato il linguaggio di script PHP e come base di dati MySql. E’
stato deciso questo sulla base del fatto che l’applicativo WebCollab é stato sviluppato in PHP
e prevede, tra le altre, anche l’utilizzo della base dati MySql utilizzata dall’azienda che ha
ospitato il tirocinio.
116 Progettazione dell’implementazione
4.1 Venditore
Di seguito è presentato il digramma della vista logica e dei componenti che raffigura le classi
stereotipate che intervengono nella visualizzazione dei domini, richiesta dall’utente venditore
e i relativi componenti che verranno utilizzate nell’implementazione (vedi figura 4.1)
Login form Venditore page
Home page -login <<submit>>
-password +Verifica input()
+Login() +Submit() <<build>>
Venditore page main.php
Pagina attiva
Menu' principale
Home page.html +visualizza domini ()
+logout() <<link>>
Lista domini Informazioni dominio
-dominio
-scadenza
+Selezina dominio() <<link>> -numero e-mail
-numero FTP
-numero DataBase
-numero sottodomini
-numero servizi
main_menu.php Domini.php
Figura 4.1: Vista logica e dei componenti – Venditore
Tramite il seguente diagramma di sequenza si riescono a vedere le interazioni tra il venditore
e il sistema per la visualizzazione delle informazioni di dominio (vedi figura 4.2)
117 Progettazione dell’implementazione
Home page Login form Venditore page Venditore page Lista domini Informazioni dominio
Venditore Naviga() Naviga()
inserisci login e password Submit() Verifica input()
Build Naviga()
seleziona dominio dall 'elenco Naviga()
Informazioni dominio selezionato
Figura 4.2: Vista logica (digramma di sequenza) – Venditore
4.2 Sviluppatore
Di seguito è presentato il digramma della vista logica e dei componenti che raffigura le classi
stereotipate che caratterizzano le funzionalità che sono state sviluppate per gli addetti allo
sviluppo (compresi gli amministratori). Inoltre vengono raffigurati i componenti che verranno
utilizzati nell’implementazione (vedi figura 4.3).
118 Progettazione dell’implementazione
Login form Sviluppatore page
Home page -login <<submit>>
-password +Verifica input() Contatto
+Login() +Submit() -azienda
-ragione sociale
-stato
<<build>> -partita iva
-codice fiscale
-nome
main.php -cognome
-telefono
Sviluppatore page -cellulare
-fax
-indirizzo
-codice postale
<<link>> -città
Elenco contatti -e-mail
-riferimento interno
-progetti
+Visualizza contatto () -domini
-banche
<<link>>
Home page.html Menu' principale Pagina attiva
+Lista ToDo()
+Calendario()
+logout() <<link>> <<link>>
<<link>> Contatti.php
Elenco progetti Calendario
main_menu.php Lista ToDo +Visualizza progetto() +Visualizza progetto()
+Seleziona task() +Visualizza task () +Visualizza task ()
<<link>> <<link>> <<link>>
<<link>> <<link>>
Task assegnato Task Calendario.php
-contatto -contatto
-prodotto Progetto -prodotto
-attività -attività
-contatto
-descrizione -descrizione
-prodotto
-assegnatario -assegnatario
-descrizione
-data creazione
Task.php -data creazione
-assegnatario
-data scadenza -data scadenza
-data creazione
-stato -stato
-data scadenza
-numero ore lavorato -numero ore lavorato
-stato
-commenti -commenti
-elenco task
-elenco file <<link>> -elenco file
-commenti
+Inserisci ore() -elenco file +Inserisci commento()
+Inserisci commento()
<<link>> +Inserisci file ()
+Inserisci commento()
+Inserisci file () +Inserisci file()
+Finito!()
Inserisci ore form <<link>>
-data <<build>>
-ora inizio
-ora fine
+Submit() Finito! <<build>>
<<build>>
<<build>> <<link>>
<<build>>
<<build>>
<<link>> <<build>>
<<submit>>
Inserisci ore Inserisci commento Inserisci file form
Inserisci commento form Inserisci commento
-messaggio -nome file
<<submit>> <<submit>>
+Verifica input() -descrizione
-seleziona destinario e-mail +Verifica input() +Verifica input()
+Salva() +Submit() +Submit()
+Salva() +Upload File()
<<build>>
Riepilogo ore
-data
-ora inizio
-ora fine
-numero ore forum.php file.php
Figura 4.3: Vista logica e dei componenti – Sviluppatore
Di seguito vengono raffigurate le viste logiche, sfruttando diagrammi di sequenza per fare in
modo che lo sviluppatore interagisca con il sistema, per poter usufruire delle funzionalità di
119 Progettazione dell’implementazione
visualizzazione dei contatti, dell’inserimento di commenti o file in un task o in un progetto e
dell’inserimento delle ore di sviluppo per un determinato task (vedi figure dalla 4.4 alla 4.7)
Home page Login form Sviluppatore page Sviluppatore page Lista contatti Contatto selezionato
Sviluppatore Naviga() Naviga()
inserisci login e password Submit() Verifica input()
Build
<<link contatti>> Naviga()
seleziona un contatto Naviga()
informazioni sul contatto selezionato
Figura 4.4: Vista logica (digramma di sequenza) – Sviluppatore – Visualizza contatti
Home page Login form Sviluppatore page Sviluppatore page Lista ToDo Task selezionato Inserisci ore form Inserisci ore Riepilogo ore
Sviluppatore Naviga() Naviga()
inserisci login e password Submit() Verifica input()
Build
<<link Lista ToDo>> Naviga()
seleziona un Task dalla lista Naviga()
informazioni sul Task selezionato
Inserisci ore Naviga()
Compila form ore Submit() Verifica input()
Salva()
Build
informazioni di riepilogo delle ore inserite in determinato task
Figura 4.5: Vista logica (digramma di sequenza) – Sviluppatore – Inserimento ore su task
120 Progettazione dell’implementazione
Valido anche per
- Lista ToDo
- Calendario Task selezionato
Home page Login form Sviluppatore page Sviluppatore page Elenco progetti Inserisci file form Inserisci file
Sviluppatore Naviga() Naviga()
inserisci login e password Submit() Verifica input()
Build
<<link elenco progetti>> Naviga()
seleziona un Task dalla lista Naviga()
informazioni sul Task selezionato
Inserisci file Naviga()
Compila form file Submit() Verifica input()
Upload()
Naviga()
informazioni sul Task selezionato
Figura 4.6: Vista logica (digramma di sequenza) – Sviluppatore – Inserimento file su task
Valido anche per
- Lista ToDo
- Calendario Task selezionato
Home page Login form Sviluppatore page Sviluppatore page Elenco progetti Inserisci commento form Inserisci commento
Sviluppatore Naviga() Naviga()
inserisci login e password Submit() Verifica input()
Build
<<link elenco progetti>> Naviga()
seleziona un Task dalla lista Naviga()
informazioni sul Task selezionato
Inserisci commento Naviga()
Compila form commenti Submit() Verifica input()
Salva()
Naviga()
informazioni sul Task selezionato
Figura 4.7: Vista logica (digramma di sequenza) – Sviluppatore – Inserimento commento su task
121 Progettazione dell’implementazione
4.3 Amministratore
Nei sottocapitoli che seguono vengono presentati i diagramma della vista logica e dei
componenti che raffigura le classi stereotipate che caratterizzano tutte le funzionalità messe a
disposizione dell’amministratore. Per rendere più leggibili i diagrammi, si è scelto di
suddividerli nella varie funzionalità, così come si è già fatto nel capitolo precedente nello
studio della UX. Anche in questo caso verranno raffigurati i componenti che si utilizzeranno
nell’implementazione.
4.3.1 Autenticazione
Iniziamo con la presentazione del diagramma della vista logica e dei componenti, che
raffigura le classi stereotipate che caratterizzano l’autenticazione. Questo diagramma è stato
fatto per evitare future. (vedi figura 4.8)
Login form Amministratore page
Home page -login <<submit>>
-password +Verifica input()
+Login() +Submit() <<build>> main.php
Amministratore page
Home page.html Menu' principale Pagina attiva
Menu' selezione
+Lista ToDo() In questa screen
+Contatti() compartement
+Calendario() +Progetti()
+logout() verranno
+Domini() visualizzate tutte
+Utenti() le voci dei due
+Fatture() menu’
+Prodotti()
+Usergroup()
+Files()
+Visualizza ore()
main_menu.php main_select_menu.php
Figura 4.8: Vista logica e dei componenti - Autenticazione
122 Progettazione dell’implementazione
Il diagramma di sequenza seguente che raffigura la vista logica dell’operazione di
autenticazione serve a raffigurare le semplici interazioni con il sistema da parte dell’utente,
che si deve preoccupare solo di inserire login e password corretti nella classe stereotipata
login form. Home page Login form Amministratore page Amministratore page
Amministratore
Naviga() Naviga()
inserisci login e password Submit() Verifica input()
Build
Figura 4.9: Vista logica (digramma di sequenza) – Amministratore – Autenticazione
123
I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher webdado di informazioni apprese con la frequenza delle lezioni di Applicazioni ipermediali e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Politecnico di Milano - Polimi o del prof Minetti Luca.
Acquista con carta o conto PayPal
Scarica il file tutte le volte che vuoi
Paga con un conto PayPal per usufruire della garanzia Soddisfatto o rimborsato