Università degli Studi Mediterranea di Reggio Calabria
Dipartimento di Ingegneria dell’Informazione, delle Infrastrutture e dell’Energia Sostenibile
Corso di Laurea in Ingegneria dell’Informazione
Tesi di Laurea
Implementazione, basata sullo UXD, delle sezioni “Storie di
successo” e “Presidio di Qualità” del nuovo sito Web di Ateneo e
interfacciamento dello stesso con altri sistemi esterni
Candidato
Relatore
Prof. Domenico Ursino
Anno Accademico 2014-2015
Giorgio Baldassarre
“User Experience significa aprire la mente e restituire all’utente l’importanza che merita. Perché le
risposte ai bisogni degli utenti non le abbiamo mai avute, le abbiamo inventate finora. Iniziare a
pensare realmente per gli altri ci fa capire che i prodotti che creiamo non vengono venduti per il puro
fatturato, bensì per offrire un servizio alle persone. “
Sommario
Sommario ...............................................................................................................................................1
Lista delle Figure .....................................................................................................................................3
Lista dei Listati ....................................................................................................................................... 5
Introduzione............................................................................................................................................ 7
Capitolo 1 Lo User Experience Design .................................................................................................. 11
1.1 Introduzione ................................................................................................................................. 12
1.2 Cos’è la User Experience ............................................................................................................... 13
1.3 L’utente al centro ......................................................................................................................... 15
1.4 Figure della User Experience......................................................................................................... 18
1.4.1 Architetto dell’Informazione (AI) ............................................................................................ 18
1.4.2 Interaction Designer (IxD) ..................................................................................................... 20
1.4.3 Content Strategist (CS) ......................................................................................................... 20
1.5 Lo User Experience Design (UXD) ................................................................................................. 21
Capitolo 2 Il progetto relativo al nuovo sito web di Ateneo ................................................................... 23
2.1 Introduzione ................................................................................................................................ 24
2.2 Analisi SWOT .............................................................................................................................. 24
2.2.1 Significato ............................................................................................................................. 24
2.2.2 Analisi del sito web di Ateneo ................................................................................................25
2.3 Scelta del CMS ............................................................................................................................ 28
2.3.1 Perché scegliere un CMS ....................................................................................................... 28
2.3.2 WordPress .............................................................................................................................30
2.4 User Experience Design applicato al nuovo sito di Ateneo ............................................................ 31
2.4.1 Discovering ............................................................................................................................ 31
2.4.2 Strutturazione dei contenuti ..................................................................................................36
2.4.3 Evoluzione Grafica .................................................................................................................36
2.4.4 Scelta del template ............................................................................................................... 42
2.4.5 Guida di stile ......................................................................................................................... 44
2.4.6 Sito web oggi ......................................................................................................................... 47
Capitolo 3 Progettazione e realizzazione della componente
“Storie di successo” ............................... 51
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
3.1 Analisi dei requisiti ....................................................................................................................... 52
3.2 Progettazione .............................................................................................................................. 52
3.3 Implementazione ......................................................................................................................... 55
3.3.1 Database ................................................................................................................................ 55
3.3.2 Funzioni PHP ......................................................................................................................... 56
3.3.3 Modelli delle pagine ............................................................................................................... 62
3.4 Feedback ..................................................................................................................................... 70
3.4.1 Risultato grafico ..................................................................................................................... 70
3.4.2 Feedback ............................................................................................................................... 73
Capitolo 4 Progettazione e realizzazione della componente “Presidio di Qualità” ................................ 75
4.1 Analisi dei requisiti ....................................................................................................................... 76
4.2 Progettazione .............................................................................................................................. 77
4.3 Implementazione ......................................................................................................................... 80
4.3.1 Pagina principale.................................................................................................................... 80
4.3.2 Sistema di Assicurazione della Qualità e sistema AVA ........................................................... 81
4.4 Risultato grafico........................................................................................................................... 83
4.4.1 Versione desktop ................................................................................................................... 83
4.4.2 Versione smartphone ............................................................................................................ 85
Capitolo 5 Interfacciamento con sistemi esterni ................................................................................... 87
5.1 Cos’è un sistema esterno .............................................................................................................. 88
5.2 Interfacciamento con il sistema GOMP ........................................................................................89
5.2.1 Analisi dei requisiti .................................................................................................................89
5.2.2 Progettazione ........................................................................................................................90
5.2.3 Implementazione ................................................................................................................... 92
5.2.4 Risultato Grafico ....................................................................................................................98
5.3 Interfacciamento con il sistema Titulus ...................................................................................... 100
5.3.1 Analisi dei requisiti ............................................................................................................... 100
5.3.2 Progettazione ...................................................................................................................... 100
5.3.3 Implementazione ................................................................................................................. 101
5.3.4 Risultato Grafico .................................................................................................................. 102
Capitolo 6 Conclusioni e uno sguardo al futuro ................................................................................... 105
Bibliografia ......................................................................................................................................... 107
Ringraziamenti ................................................................................................................................... 109
2
Giorgio Baldassarre
Lista delle Figure
Figura 1.1 - Interfaccia a Tiles di Windows 10 ............................................................... 12
Figura 1.2 - Utente prosumer ....................................................................................... 14
Figura 1.3 - Latte difficile da aprire ...............................................................................15
Figura 1.4 - Problemi di surriscaldamento degli smartphone ........................................15
Figura 1.5 - Latte ideato con UX .................................................................................. 16
Figura 1.6 - Domande e risposte ................................................................................... 17
Figura 1.7 - Posizione dell’AI nella progettazione ......................................................... 19
Figura 1.8 - Breadcrumb del Sito di Ateneo ................................................................. 20
Figura 1.9 - Un esempio di immagine per attirare l’attenzione ..................................... 20
Figura 2.1 - Home Page dell’attuale sito Unirc ............................................................. 25
Figura 2.2 – Attuale portale Unirc come viene visto da smartphone (con zoom) .......... 26
Figura 2.3 - Struttura della pagina interna “Studenti” ...................................................27
Figura 2.4 - Analisi SWOT del sito di Ateneo ................................................................ 28
Figura 2.5 - I principali CMS esistenti .......................................................................... 29
Figura 2.6 - Curve di apprendimento dei tre principali CMS ......................................... 30
Figura 2.7 - Docenti intervistati.................................................................................... 32
Figura 2.8 – Componenti del PTA intervistati ...............................................................33
Figura 2.9 - Studenti dell’Università intervistati ........................................................... 34
Figura 2.10 - Studenti delle superiori intervistati...........................................................35
Figura 2.11 – Mappa di primo livello della struttura del nuovo sito di Ateneo ................ 37
Figura 2.12 - Versione 0 del mockup relativo alla home page del sito ........................... 38
Figura 2.13 – Versione 1 del mockup relativo alla home page del sito ........................... 39
Figura 2.14 – Versione 1 dei mockup relativi agli studenti e alle lauree triennali ........... 40
Figura 2.15 – Versione 2 dei mockup relativi alla home page del sito ........................... 41
Figura 2.16 – Versione 3 dei mockup relativi alla home page del sito............................ 42
Figura 2.17 - Polytechnic Template .............................................................................. 43
Figura 2.18 - Accordion Chiuso .................................................................................... 44
Figura 2.19 - Accordion Aperto .................................................................................... 45
Figura 2.20 - Laboratori con tab .................................................................................. 45
Figura 2.21 - Tab responsive ........................................................................................ 46
Figura 2.22 – Tile presenti nel nuovo sito web di Ateneo.............................................. 46
Figura 2.23 - Menù di livello 3 ...................................................................................... 47
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 2.24 – Le home page del sito per desktop e smartphone ................................... 48
Figura 2.25 - Percorsi rapidi ......................................................................................... 48
Figura 2.26 - Collegamenti ai siti dipartimentali ........................................................... 49
Figura 2.27 - Software Testing ..................................................................................... 49
Figura 3.1 - Italia senza pregiudizi ................................................................................ 52
Figura 3.2 – Mockup relativo alle storie di successo ...................................................... 53
Figura 3.3 – Mockup relativo alla singola storia di successo .......................................... 54
Figura 3.4 – La sezione “Storie di successo” in versione desktop .................................. 71
Figura 3.5 – Visualizzazione di una singola storia di successo per desktop .................... 71
Figura 3.6 – Visualizzazione su smartphone del contenuto delle Figure 3.4 e 3.5 .......... 72
Figura 3.7 - Feedback Positivo ...................................................................................... 73
Figura 4.1 – Pagina principale della sezione “Presidio di Qualità” ................................. 76
Figura 4.2 - Sistema di assicurazione della qualità e sistema AVA ................................ 77
Figura 4.3 – Mockup relativo alla pagina principale della sezione “Presidio di Qualità” . 78
Figura 4.4 - Mockup relativo alla sottosez. “Sistema di Assicurazione della Qualità e
sistema AVA” .............................................................................................................. 79
Figura 4.5 – Pagina principale della sezione “Presidio di Qualità” ................................. 83
Figura 4.6 – Sottosez. “Sistema di Assicurazione della Qualità e sistema AVA” in versione
desktop ....................................................................................................................... 84
Figura 4.7 – Sezione “Presidio di Qualità” e sottosezione “Sistema di Assicurazione della
Qualità e sistema AVA” in versione smartphone .......................................................... 85
Figura 5.1 - Sezione “Didattica” dell’attuale portale di Ateneo ..................................... 89
Figura 5.2 – Mockup relativo alle sezione “Didattica” del nuovo sito web di Ateneo ..... 90
Figura 5.3 – Mockup relativo alla sottosezione “Lauree Triennali” ................................ 91
Figura 5.4 – Pagina relativa alla sezione “Didattica” ..................................................... 98
Figura 5.5 – Pagina relativa alla sottosezione “Lauree Triennali” .................................. 98
Figura 5.6 – Pagina relativa alla sottosezione “Insegnamento” .................................... 99
Figura 5.7 – Mockup relativo alla sezione “Albo Pretorio Online”................................ 100
Figura 5.8 – Pagina principale della sezione “Albo Pretorio Online”............................ 103
4
Giorgio Baldassarre
Lista dei Listati
Listato 3.1 – Codice relativo al caso 1 della funzione get_storie_successo ( ) 57
Listato 3.2 – Codice relativo al caso 2 della funzione get_storie_successo() ... 58
Listato 3.3 – Codice relativo al caso 3 della funzione get_storie_successo() .... 59
Listato 3.4 – Codice della funzione get_storia_successo() .............................. 60
Listato 3.5 – Codice relativo alla funzione get_json_data() nel caso in cui
type=”storiesuccesso” .................................................................................... 61
Listato 3.6 – Codice PHP per il filtraggio delle storie di successo .................................. 63
Listato 3.7 – Codice relativo alla gestione della barra ricerca ........................................ 64
Listato 3.8 – Codice relativo alla gestione del filtro per dipartimento ........................... 64
Listato 3.9 – Codice relativo alla visualizzazione delle storie di successo ...................... 66
Listato 3.10 – Codice relativo al richiamo dell’ID della storia di successo ...................... 67
Listato 3.11 – Codice per la stampa delle informazioni principali relativa ad una storia di
successo ...................................................................................................................... 69
Listato 3.12 – Codice per la stampa delle informazioni testuali relative ad una storia di
successo ...................................................................................................................... 70
Listato 4.1 – Codice relativo alla visualizzazione della pagina principale ...................... 80
Listato 4.2 – Codice atto alla visualizzazione della struttura tab con doppio accordion 82
Listato 4.3 – Codice relativo ai tab in versione smartphone .......................................... 82
Listato 5.1 – Elemento GetCds del WSDL dei WS di GOMP ....................................... 88
Listato 5.2 – Codice relativo alla funzione getCds($uid) ........................................ 93
Listato 5.3 – Codice relativo alla funzione getCurricula($cds) .......................... 94
Listato 5.4 – Codice relativo al richiamo delle variabili ................................................. 95
Listato 5.5 – Codice relativo alla visualizzazione dei moduli dell’insegnamento ........... 96
Listato 5.6 – Codice relativo al salvataggio dell’id dell’insegnamento .......................... 97
Listato 5.7 – Codice relativo alla visualizzazione delle informazioni testuali ................. 97
Listato 5.8 – Codice relativo alla gestione dell’albo pretorio ...................................... 102
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
6
Giorgio Baldassarre
Introduzione
Il sito web di un Ateneo è, oggigiorno, il biglietto da visita dell’Ateneo stesso, nonché il principale
strumento di diffusione delle informazioni (news, eventi, esami, lezioni, etc.). Tramite esso, in
particolare, si ha la possibilità di far conoscere agli studenti i corsi disponibili e gli sbocchi lavorativi
offerti dalle lauree. Dal punto di vista informativo, non c’è niente di più importante; in effetti, un
sito semplice e intuitivo permetterebbe agli utenti di accedere rapidamente ai contenuti che li
incuriosiscono. In caso di sito complesso, invece, l’utente potrebbe non raggiungere l’informazione
cercata e l’Ateneo sarebbe giudicato negativamente senza aver avuto alcuna voce in capitolo.
Sfortunatamente, l’attuale sito di Ateneo appare piuttosto complesso: esso è semplicemente
usabile, ovvero efficace (fa bene ciò per cui è stato progettato) ed efficiente (è stato progettato
ottimizzando al meglio le risorse). L’usabilità non implica una buona esperienza utente; infatti, il
sito web attuale ha vari difetti, i quali sono stati segnalati dagli utenti stessi. Tra questi citiamo i
seguenti:





molti contenuti non sono disponibili;
molte sezioni non sono aggiornate;
la navigazione non è semplice (soprattutto, per i neo-studenti);
la strutturazione dei contenuti non è intuitiva;
la navigabilità da smartphone non è piacevole (il sito non è “responsive”).
Questo insieme di problemi si traduce in una sola frase: il sito non è stato creato per l’utente. Perciò,
molto spesso, egli non riesce a trovare i contenuti che lo interessano; se un contenuto non è facilmente
accessibile, l’informazione che trasporta è persa. Per tutti questi motivi, si è scelto di riprogettare
l’intero portale di Ateneo utilizzando lo User Experience Design (UXD), restituendo all’utente
l’importanza che non gli è stata concessa in precedenza. Basare la progettazione sullo UXD significa
mettere al primo posto l’utente, in modo che egli renda noti i suoi problemi e i suoi bisogni; solo in
questo modo si può ottenere un sito adatto all’utente, caratterizzato da interfaccia semplice e
contenuti accessibili in pochi click. Tramite i mezzi dello UXD (interviste, questionari, focus group,
etc.), sono stati individuati i problemi di cui soffre l’attuale sito ed è stata effettuata una serie di scelte
per risolverli. L’architettura dell’informazione è stata riprogettata, distribuendo l’informazione stessa
fra i vari tipi di utenza (studenti delle scuole superiori, studenti iscritti, docenti, etc.) e sono state scelte
delle strutture grafiche specifiche per rendere il sito piacevole alla navigazione. Il sito attuale, inoltre,
è difficilmente modificabile a causa del metodo con cui è stato progettato.
Un sito moderno, invece, deve essere capace di evolversi di continuo per soddisfare gli utenti nel
tempo; la situazione del sito attuale non deve ripetersi. Per questo motivo, si è scelto di usare un CMS.
Un CMS (Content Management System) è uno strumento software la cui funzione è quella di facilitare
la gestione dei contenuti di un sito web; creare pagine, modificare la grafica del sito e implementare
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
nuove funzionalità diventa quasi un gioco. In particolare, è stato scelto il CMS WordPress, il quale è il
più semplice da apprendere ed è, soprattutto, il più utilizzato al mondo. Il CMS è stato user-friendly dal
primo utilizzo e ci ha aiutato ad imparare al volo tutte le sue funzionalità, le quali, considerando i plugin
installabili, sono davvero tantissime. Grazie a questa semplicità, anche il lavoro in team è stato
notevolmente semplificato, poiché i primi membri del team hanno appreso il funzionamento del CMS
in qualche giorno e lo hanno spiegato ancora più semplicemente ai nuovi membri. Questo è un
dettaglio non trascurabile per garantire una continuità di personale attivo sul sito. Nonostante gli
strumenti offerti da WordPress, progettare e implementare un sito del genere è stato tutt’altro che
facile, poiché le informazioni da visualizzare, statiche o dinamiche che siano, provengono da fonti
differenti (sito attuale, database di Ateneo, sistemi esterni, etc.). Questo significa che è stato
necessario implementare funzionalità specifiche per ogni sezione.
Per un gran lavoro come questo, è stato formato un grande team di studenti; il sito, per la prima
volta nella storia dell’Ateneo, è stato realizzato, infatti, totalmente da studenti. Tale realizzazione ha
richiesto parecchi mesi, ma la passione ha spinto il team a migliorarsi continuamente sia in campo
informatico che nel campo dell’interazione reciproca; in questo modo il sito a diventato ogni mese più
vicino al modello finale. Per garantire un lavoro di qualità, ad ogni membro sono stati affidati dei
compiti di difficoltà crescente: si è iniziato con la creazione di semplici pagine statiche tramite l’utilizzo
di codice HTML-CSS, poi si è passati ai contenuti dinamici, utilizzando del codice PHP per richiamare i
contenuti dal database MySQL; infine, si è arrivati all’interfacciamento coi Web Service. La continuità
del team è garantita dal fatto che i membri più “navigati” aiutano i nuovi, “investendoli” di conoscenze
informatiche e passione.
Il team si è occupato della configurazione iniziale di WordPress, installando i primi plugin e facendo
le prime esperienze di HTML-CSS-PHP-MySQL su un server di prova. Dalle prove, si è passati alla
realizzazione del sito, dividendosi i compiti, subito dopo la scelta del template. In particolare, nella
presente tesi ci siamo occupati della realizzazione delle sezioni “Storie di successo”, ”Presidio di
Qualità”, ”Didattica”, ”Albo Pretorio Online”. Le sezioni sono di tipi differenti, per cui è stato molto
formativo implementarle: abbiamo, infatti, avuto la possibilità di apprendere diversi metodi tramite i
quali prelevare e visualizzare le informazioni.
La sezione “Storie di successo” è dinamica. Questo significa che le informazioni visualizzate si
modificheranno nel tempo, poiché vengono prelevate da un’opportuna sorgente di dati. Le storie di
successo sono state opportunamente memorizzate in tale sorgente, perciò abbiamo utilizzato i metodi
di connessione forniti da WordPress per prelevare i dati; la grafica è stata realizzata seguendo gli stili e
le scelte grafiche della guida di stile. Il concetto di guida di stile non esiste nel sito attuale, per cui essa
è stata progettata totalmente da noi.
La sezione “Presidio di Qualità” è statica. Questo significa che le informazioni visualizzate non
varieranno nel tempo, essendo state inserite direttamente nel codice HTML. L’unica difficoltà di
questa sezione è stata riscontrata nella quantità di informazioni presenti; infatti abbiamo dovuto
implementare una struttura grafica specifica per poter gestire al meglio le informazioni di questa
sezione.
8
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità”…
La sezione “Didattica” è dinamica. In questo caso, le informazioni sono state prelevate dal sistema
esterno GOMP. Dopo aver consultato il WSLD dei Web Service di GOMP, abbiamo implementato le
funzioni utili, includendo del codice specifico per la gestione della memoria cache, e, infine, abbiamo
curato la grafica, rispettando i bisogni dell’utente e la guida di stile.
La sezione “Albo Pretorio Online” è dinamica. Similmente al caso precedente, le informazioni sono
state prelevate dal sistema esterno. Tuttavia, le funzioni atte a prelevare i dati sono state diverse da
quelle utilizzate nella sezione “Didattica”. Infatti, le informazioni fornite dal sistema Titulus, che si
occupa della gestione del protocollo, sono salvate in un file XML; per tale ragione abbiamo effettuato
un parsing del file XML e una trasformazione delle informazioni qui presenti in PHP per poterle
prelevare.
La seguente tesi è strutturata come di seguito specificato:






Nel primo capitolo verrà introdotto il concetto di User Experience Design; tramite alcuni
esempi, verrà mostrata l’innovatività di questo nuovo metodo di progettazione.
Nel secondo capitolo verranno trattati l’analisi dell’attuale sito web di Ateneo e la
progettazione generale del nuovo sito.
Nel terzo capitolo verranno trattate la progettazione e l’implementazione della sezione
“Storie di successo”.
Nel quarto capitolo verrà trattata la realizzazione della sezione “Presidio di Qualità”.
Nel quinto capitolo verrà illustrato l’interfacciamento del sistema informativo di Ateneo
con i sistemi esterni GOMP e Titulus.
Nel sesto ed ultimo capitolo verranno trattate le conclusioni e verranno delineati i
possibili sviluppi futuri del nuovo sito web di Ateneo.
Giorgio Baldassarre
9
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
10
Giorgio Baldassarre
Capitolo 1
Lo User Experience Design
Questo capitolo è incentrato sullo User Experience Design (UXD), una nuova tecnica di programmazione
che pone al centro l’utente. Verranno analizzate la forza della User Experience (UX) e la sua applicazione
su un sistema informativo per ottenere un prodotto software di alta qualità, capace di rispondere ai bisogni
dell’utente.
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
1.1 Introduzione
Lo User Experience Design(UXD), letteralmente “progettazione ispirata dall’utente”, è ciò che si
ottiene applicando la User Experience ad un contesto digitale per ottenere un prodotto software con
un alto grado di soddisfazione dell’utente.
La nostra realtà è ricca di prodotti, software e non, ma non tutti hanno la stessa qualità. L’utente
può essere considerato come alleato del nostro prodotto oppure come obiettivo da convincere. Se lo
consideriamo come obiettivo, inizieremo a creare l’impossibile per sorprenderlo. Il successo, in questo
caso, sarebbe puramente fortuito perché abbiamo agito senza chiedere il suo parere. Fallire è molto
più semplice, perché l’utente non è una persona qualunque, ha la sua mentalità ed essa va compresa a
fondo prima di poter progettare qualcosa per lui. Chi può sapere nello specifico cosa l’utente vuole?
La risposta è complessa. Nessuno può saperlo; solo l’utente! Il problema è che quest’ultimo non è
un esperto di comunicazione e non riesce ad esprimere al meglio i propri gusti. In un mondo in continua
evoluzione come il nostro, è necessario agire con umiltà e chiedere all’utente cosa vuole in modo da
poter fornire il miglior servizio possibile. Bisogna accettare che la risposta a tutti i problemi non è
sempre l’idea più complessa; se non si parte da tale presupposto, si rischia di progettare qualcosa di
strutturalmente completo e ricco di funzioni, che nessuno riesce ad utilizzare. Affrontando il problema
con la UX, si giunge a soluzioni che nessuno si sarebbe mai aspettato. A titolo d’esempio, nella Figura
1.1, viene mostrata la semplice interfaccia di Windows 10.
I tiles di windows (dalla versione 8.1 in poi) sono da sempre il simbolo della semplicità e della User
Experience: le immagini forniscono un’anteprima del contenuto, mentre i colori li rendono
graficamente piacevoli.
Figura 1.1 - Interfaccia a Tiles di Windows 10
12
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità”…
Al giorno d’oggi, il termine “migliore” non significa migliore in assoluto, ma adatto all’utente,
ovvero progettato su misura. Cosa fare?
La risposta è nel come riuscire a capire cosa l’utente voglia realmente. Qui entra in gioco la User
Experience: solo studiando in modo serio l’esperienza dell’utente di fronte ad un prodotto, si può capire
quanto sia importante questo tipo di analisi.
1.2 Cos’è la User Experience
La User Experience(UX) è un punto di vista
rivoluzionario, un nuovo modo di progettare in
cui l’utente viene posto al centro della
progettazione stessa.
Egli viene coinvolto in tutte le fasi di
sviluppo del prodotto, garantendo un alto
grado di soddisfazione continuato nel tempo.
Qualunque sia il tipo di prodotto, l’utente
ne è il destinatario: egli dovrà utilizzarlo.
Se il destinatario non riesce ad utilizzare al
meglio da ciò che ha acquistato, non sarà
soddisfatto e sarà prevedibile il passaggio ad un
prodotto concorrente.
Nella UX vi sono 3 aspetti chiave, ovvero:



l’elemento X, ovvero l’oggetto;
il processo, ovvero l’utilizzo dell’elemento X;
la soggettività dell’esperienza personale, ovvero la reazione dell’utente.
L’analisi può diventare costosa, poiché i 3 aspetti devono essere analizzati con precisione per dare
vita ad un prodotto unico e perfettamente adatto all’utente. L’elemento X è il prodotto, dovrà essere
semplice è funzionale, rispondendo ai bisogni dell’utente senza perdere qualità nel tempo. Il processo
è l’interazione sistema-persona e dovrà avere un impatto positivo sull’utente. Infine, l’utente reagisce
all’interazione e qui entra in gioco la nostra analisi. Tipiche domande da porsi in un contesto del genere:
Cosa l’utente apprezza del nostro prodotto? Cosa non apprezza? Perché ha reagito in questo
modo? I quesiti sono molti. Come si nota, la UX coinvolge moltissimi ambiti, fra cui la psicologia. Noi
stiamo analizzando la reazione dell’utente in tutte le sue forme; nulla va trascurato.
Per questo motivo sono richieste personalità specifiche, che lavorino a stretto contatto con
l’utente. Le funzionalità del prodotto e l’efficienza pura perdono il peso che avevano in passato.
Giorgio Baldassarre
13
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
L’utente ha bisogno di un prodotto ben funzionante; non deve necessariamente essere il più
potente/ricco di funzioni. I principi di un buon prodotto sono i seguenti:




semplicità;
facilità di memorizzazione;
controllo di errore;
grado di soddisfazione.
I quattro principi sono strettamente correlati fra loro. Se il prodotto è semplice e intuitivo da
utilizzare, l’utente si troverà a suo agio con esso. In un sito web, il controllo di errore è di fondamentale
importanza. Cosa accade se l’utente clicca nel punto sbagliato? Se il sito è ben fatto, verrà visualizzato
un messaggio di errore breve e conciso per rendere chiaro cosa egli avrebbe dovuto fare.
Se l’utente si ritrovasse immerso negli errori e senza guida, preferirebbe cambiare sito o, nel caso
limite, chiudere il browser. Se noi progettassimo senza tener conto dell’utente, come avveniva in
passato, l’obiettivo sarebbe ottenere un prodotto usabile, ovvero efficace ed efficiente.
Efficace vuol dire che fa bene ciò per cui è stato progettato.
Efficiente denota che è stato progettato ottimizzando al meglio le risorse.
Oggi l’usabilità non è sufficiente. Una mente limitata direbbe “l’utente non sa cosa vuole, noi lo
sappiamo”. Con questo semplice inciso si comprende perché la UX è così importante. Questa nuova
prospettiva è indice di un pensiero evoluto ed elastico: perché imporre un prodotto all’utente?
L’utente odierno è un web prosumer, produttore e consumatore dell’informazione! (Figura 1.2).
Egli ha diritto di parola, deve poter comunicare i suoi bisogni e le sue difficoltà. Grazie agli
specialisti della UX, egli saprà se questi bisogni possano essere realmente soddisfatti o meno.
Figura 1.2 - Utente prosumer
14
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità”…
1.3 L’utente al centro
L’utente è al centro: la progettazione ruota attorno a
lui, ma ciò non significa che i suoi bisogni siano legge. Le
richieste dell’utente verranno studiate e filtrate a dovere
in modo che possa nascere un prodotto ben strutturato,
soddisfacente, e soprattutto realizzabile. L’utente non è
un programmatore, né un progettista o un grafico. Non
può fornire idee, ma solo richieste. Se gli esperti della UX
saranno all’altezza, le sue richieste potranno dar vita ad
un prodotto concreto e funzionale.
Evitare l’utente è sbagliato: si darà vita ad un prodotto
con problemi inizialmente non noti, poiché solo un utente
li troverà. È un rischio insensato!
Quanto è importante analizzare l’utente? Se egli non entra in gioco, vengono progettati prodotti
usabili, ma con difetti che solo un utente può notare nella realtà quotidiana. Le Figure 1.3 e 1.4
mostrano prodotti comuni con difetti gravi. Per l’utente medio è molto semplice capire l’inutilità di una
potenza di calcolo eccessiva in un cellulare, tenendo conto delle conseguenze sulla durata della
batteria e sul riscaldamento eccessivo di alcuni di essi (possono superare i 40 gradi celsius, se sottoposti
a sforzo), ma alcune aziende ormai fanno a gara aumentando ogni anno la potenza di calcolo,
trascurando i reali bisogni dell’utilizzatore. L’inutile priorità è far apparire grande potenza sulla carta:
4 core, 8 core, etc.
Come secondo esempio consideriamo il latte con apertura difficile. Si pensi ad un normale
risveglio, inizio della giornata: il cervello è in totale riposo e noi dovremmo utilizzare forbici/coltello per
aprire il latte.
Figura 1.4 - Problemi di surriscaldamento degli smartphone
Figura 1.3
Giorgio Baldassarre
Figura 1.3 - Latte difficile da aprire
15
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Qui entra in gioco la UX pura. Non importa cosa l’utente voglia; i progettisti dovranno fare uno
sforzo per rendere più semplice l’utilizzo del prodotto. L’utente può solo comunicare i suoi problemi e
i suoi bisogni; gli specialisti della UX dovranno tradurli in idee concrete. Le confezioni in Figura 1.5 sono,
invece, progettate sulla base della UX; esse sono molto semplici da aprire. Anche un bambino potrebbe
farcela, poiché non c’è il bisogno di utilizzare oggetti appuntiti. La prospettiva dell’utente fornisce
numerosi vantaggi: si riesce a progettare proprio ciò di cui l’utilizzatore ha bisogno.
RISULTATO
Figura 1.5 - Latte ideato con UX
Come ogni soluzione, non è priva di costi. Un’analisi corretta richiede risorse specifiche (le figure
della UX) e tempo, durante il quale l’utente stesso sarà spesso coinvolto attivamente nella
progettazione. La UX è applicabile su qualunque tipo di prodotto e ci permette di ottenere ottimi
risultati, purché noi ascoltiamo con reale attenzione l’utente e modifichiamo dinamicamente il
prodotto. È possibile che dopo un anno venga richiesta una modifica e noi dovremo realizzarla.
Come si ottiene esattamente ciò che l’utente desidera? Bisogna analizzare l’utente a 360 gradi. Per
fare ciò, esistono delle procedure ormai ben testate, le quali vanno utilizzate fin dall’inizio nella
progettazione in modo tale che l’utente non venga mai trascurato. All’inizio della progettazione vi è la
fase di Discovering. L’obiettivo è quello di conoscere i bisogni dell’utente in modo chiaro e ben
strutturato. I punti focali dell’analisi sono:




16
COSA l’utente vuole;
COME egli utilizzerà il prodotto;
COSA potrebbe metterlo in difficoltà;
PERCHÉ dovrebbe preferire il nostro prodotto rispetto ai concorrenti.
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Abbiamo molte alternative per ottenere tali informazioni.





intervista 1-TO-1;
indagine contestuale;
focus Group;
questionari con risposte chiuse (scritti oppure online);
questionari con risposte aperte.
Figura 1.6 - Figura
Domande
1.6 e risposte
Tanti mezzi ci faranno accedere a diversi “tipi” di informazione. Inizialmente conviene utilizzare
le interviste per ottenere informazioni di base ed iniziare a “impersonare” l’utente, ovvero a pensare
come lui. Solo in questo modo riusciremo a rispondere ai suoi bisogni e tentare di prevedere i problemi
che dovrà affrontare. L’utente va messo a proprio agio.
Bisogna farlo rilassare; le domande poste con calma; egli dovrà ragionare e rispondere in modo
naturale. I Focus Group (interviste di gruppo) forniscono una grande quantità di informazioni in poco
tempo. Potrebbero nascere problemi se le idee in gioco fossero troppo diverse, perciò converrebbe
riunire gruppi omogenei per ottenere idee coerenti ed evitare contrasti all’interno del gruppo stesso.
Dopo aver ottenuto le prime idee, è normale che rimangano aperti alcuni dubbi. In questo caso, si
utilizzano i questionari a risposta chiusa, del tipo SI/NO. In ogni questionario è necessario inserire una
domanda aperta del tipo “vorresti aggiungere altro?” in modo tale da ottenere idee fuori dagli schemi,
ovvero idee inaspettate.
L’indagine contestuale è un mezzo molto potente, che ci permette di ottenere informazioni
direttamente dall’esperienza dall’utente. Essa, infatti, consiste nell’assistere all’utilizzo del prodotto
da parte dell’utente. Possiamo assistere passivamente, in questo modo l’utente non sarà messo in
soggezione.
In alternativa, possiamo “guidarlo” e fare delle domande durante l’utilizzo. Come si può notare,
ciascuno di questi mezzi ci fa ottenere informazioni e sottrae tempo all’utente. Per questa ragione è
opportuno prendere per lui una ricompensa.
Tipiche ricompense potrebbero essere un gadget, una sua menzione nel sito, etc. L’importante
non è la ricompensa in sé, ma il fatto di prenderla. In effetti, se l’utente non collaborasse, non ci sarebbe
la User Experience.
Giorgio Baldassarre
17
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
1.4 Figure della User Experience
Le principali figure coinvolte durante la User
Experience sono le seguenti:



l’Architetto dell’Informazione (AI);
l’Interaction Designer (IxD);
il Content Strategist (CS).
Queste sono le figure indispensabili. Spesso,
inoltre, è opportuna la presenza delle ulteriori
seguenti figure:




sentiment analyst ;
usability analyst ;
copywriter;
visual designer.
Questi ultimi si occupano della reazione sentimentale dell’utente (1), dell’usabilità del sito (2), dei
diritti dei contenuti (3) e della grafica(4). Progettare un qualcosa ad hoc per un utente non è semplice.
Per questo motivo bisogna vedere il sistema informativo diviso in strati. Alla base vi è l’architettura
dell’informazione, metaforicamente simile allo scheletro del corpo umano. Lo scheletro sorregge il
corpo, ci permette di tenere una postura corretta, ma nessuno lo vede perché coperto dalla pelle, che
funge da interfaccia fra lo scheletro ed il mondo esterno. Se l’architettura viene ben costruita, il sito
web sarà ben strutturato. Qui entra in gioco l’architetto dell’informazione.
1.4.1 Architetto dell’Informazione (AI)
L’Architetto dell’Informazione si occupa della strutturazione dei contenuti nel sistema informativo.
L’AI sceglie la logica delle pagine, ovvero i passaggi fra un contenuto ed i successivi. Perché dare così
tanta importanza a questo aspetto? Se un’informazione risulta difficilmente raggiungibile dall’utente,
essa è persa…è come se non fosse presente! L’informazione odierna è a-spaziale: viene allocata in un
punto fisico (esempio in un server), ma è raggiungibile da più link, di conseguenza può trovarsi in più
luoghi del sito. In quale pagina del sito mostrarla? In definitiva, per ogni informazione, abbiamo più
collegamenti e più forme di accesso (pc, tablet, smartphone). L’informazione va classificata con
criterio. Un AI deve saper organizzare l’informazione in modo logico e dinamico.
18
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Se un utente si connette da uno smartphone, non potrà ricevere gli stessi dati destinati ad un PC,
poiché soffrirebbe di un’attesa maggiore (pensiamo ad una connessione 3G). Questo ruolo è di grande
importanza; è il centro della progettazione stessa, come si nota nella Figura 1.7.
Figura 1.7 - Posizione dell’AI nella progettazione
L’errore comune è scambiare i dati col termine “informazione” e, soprattutto, credere che più dati
significhino più informazione. I dati a nostra disposizione vanno ordinati e “ripuliti” da termini
complessi/ridondanti.
La quantità non si traduce quasi mai in qualità. Meglio utilizzare poche parole chiare e concise,
mettendoci nei panni dell’utente/lettore. Una maggior quantità di parole da leggere crea stress ancor
prima dell’inizio della lettura.
L’architettura dell’Informazione, inoltre, è la componente di basso livello del sistema. Il talento
dell’architetto sta nel garantire un buon margine di flessibilità al sistema: un domani potrebbero essere
necessarie delle modifiche per rendere moderno il sito. Il mondo informatico è in continua evoluzione,
perciò la struttura deve esser pronta a trasformarsi facilmente nel tempo.
Giorgio Baldassarre
19
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
1.4.2 Interaction Designer (IxD)
L’Interaction Designer progetta l’interazione sistema-utente, dando la massima priorità alle
interfacce. Con la UX, le regole del passato vengono cambiate. Una buona grafica non implica
un’ottima interazione!
Si dice che la qualità di un sito web debba tradursi in un’interfaccia di semplicità crescente, al
crescere della quantità di informazione presente. Si pensi ad un sito di Ateneo: la quantità di
informazione presente è immensa. Come agire? La priorità sta nel guidare l’utente, evitando che egli
si perda nell’immensità delle informazioni presenti. Nei siti moderni e ricchi di informazione, si usano i
breadcrumb (Figura 1.8), che indicano all’utente la sua posizione all’interno del sito.
Figura 1.8 - Breadcrumb del Sito di Ateneo
I breadcrumb (dall’inglese “molliche di pane”) saranno la guida per il nostro utente. Ormai sono
d’obbligo per qualunque sito complesso.
1.4.3 Content Strategist (CS)
Il Content Strategist si occupa del contenuto del Sito web. Qui entra in gioco la psicologia dell’utente.
L’AI ha scelto di posizionare l’informazione X nella home page, ma in quale punto di essa?
Il CS sa esattamente dove l’utente poserà lo sguardo. Ogni piccolo accorgimento grafico può
diventare una strategia vincente per rendere l’utente soddisfatto della navigazione. Pensiamo ad
un’informazione chiave: l’orario di apertura di un negozio. Questa informazione deve essere
posizionata quanto più in vista possibile affinché l’utente la ottenga
subito.In questo caso, basta utilizzare due elementi:


colore forte;
immagine semplice che attiri l’attenzione (Figura 1.9).
Figura 1.9 - Un esempio di immagine
per attirare
Figura 1.9
l’attenzione
20
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Il CS dovrà trovare la posizione più adatta per ogni contenuto. Se l’utente riesce a trovare proprio
ciò che cercava, il sito guadagna un visitatore soddisfatto. Nel caso opposto, bisognerà accettare con
maturità le critiche e adattarsi ai bisogni dell’utente. Le tre personalità viste in precedenza sono al
servizio dell’utente, ma a livelli differenti. La loro cooperazione è alla base di un buon prodotto
software.
1.5 Lo User Experience Design (UXD)
Dopo aver analizzato la User Experience,
si può comprendere il significato dello User
Experience Design e, soprattutto, fare un
bilancio dei pro e dei contro di questa tecnica.
Il risultato dell’adozione di essa è un prodotto
in grado di soddisfare l’utente ed evolversi nel
tempo, adattandosi dinamicamente alle
richieste future. Tuttavia, per giungere ad un
tale risultato, è necessario affrontare dei costi
non trascurabili. Nella tabella 1.1 riportiamo i
pro e i contro dello User Experience Design.
PRO
Soddisfazione dell’utente assicurata
Prodotto facilmente modificabile
Soluzioni ad hoc per l’utente
CONTRO
Tempo per raccogliere i dati (Discovering)
Tempo per analisi continuata dell’utente
(Testing)
Necessità di avere disposizione personalità
specifiche
Tabella 1.1 - Pro e contro dello User Experience Design
Come si nota dalla tabella, con lo UXD è necessario investire del tempo per analizzare gli utenti e
si ha necessariamente bisogno delle tre personalità citate in precedenza. Il numero dei pro e dei contro
è pari, ma la qualità dei pro supera esponenzialmente quella dei contro. Cosa accadrebbe se si
progettasse un sito che l’utente non riesce ad usare o che l’utente non apprezza?
Si dovrebbe ricominciare da zero!!! Noi investiamo molto tempo a stretto contatto con gli utenti,
ma così si ha la certezza di ottenere un prodotto fedele ai loro bisogni: si riduce al minimo il rischio di
dover ricominciare da zero e, così facendo, di perdere tutte le risorse precedentemente utilizzate.
Giorgio Baldassarre
21
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Il termine prodotto ad hoc raccoglie in sé un lato estremamente positivo: si è riusciti a creare la
perfezione per l’utente, tutto ciò che egli ha chiesto. Un utente soddisfatto potrebbe farci pubblicità
coi suoi feedback positivi e accrescere il numero di utenti del sistema stesso.
Dopo il rilascio del prodotto, si ha la fase di testing, durante la quale l'utente comunicherà di
continuo la sua esperienza di navigazione nel sito web. Solo investendo tempo in questo modo,
potremmo ottenere risultati concreti ed avere un sito in continua evoluzione. Questa è la forza dello
User Experience Design.
22
Giorgio Baldassarre
Capitolo 2
Il progetto relativo al nuovo sito web di Ateneo
In questo capitolo verrà trattato il progetto relativo al nuovo sito web di Ateneo. Un sito web diventa il
mezzo chiave per far conoscere al mondo il nostro Ateneo. Un sito del genere contiene una quantità
immensa di informazioni, la quale deve essere ben strutturata e classificata; non tutte le informazioni
hanno lo stesso valore, al variare del tipo di utente.
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
2.1 Introduzione
Utilizzando la User Experience, si è notato che il sito web attuale doveva essere ridisegnato e
trasformato totalmente per fornire all’utente un’esperienza di navigazione godibile, rendendo
facilmente accessibile qualunque informazione a lui utile. Le informazioni più utili all’utenza sono
proprio quelle più difficili da trovare. Queste informazioni meritano la nostra attenzione e la ottengono
nel nuovo sito web. La UX si dimostra sempre più adatta ai nostri scopi. Come si ha la certezza che il
tipo di utente A dia una priorità alta all’informazione X? Durante la fase di Discovering sono stati
intervistati vari utenti, grazie ai quali abbiamo potuto strutturare le informazioni a nostra disposizione.
Ogni utente merita una navigazione semplice e intuitiva: egli deve poter trovare ciò che cerca,
impiegando il minimo tempo possibile.
Il capitolo sarà così strutturato:





analisi dell’attuale portale dell’Ateneo;
progettazione del nuovo portale;
scelte implementative;
scelte grafiche;
il sito oggi.
2.2 Analisi SWOT
2.2.1 Significato
L’analisi SWOT è un tipo di analisi molto
efficiente, infatti ci permette di riassumere un
prodotto in quattro aspetti chiave:




punti di forza (Strengths);
punti di debolezza (Weaknesses);
opportunità (Opportunities);
minacce (Threats).
La sua forza è nella semplicità dei quattro aspetti chiave. Se un prodotto presenta più punti di forza
e opportunità rispetto ai punti di debolezza e alle minacce, conviene conservarlo o, al limite,
perfezionarlo. In caso opposto, si procede alla riprogettazione.
24
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
2.2.2 Analisi del sito web di Ateneo
In Figura 2.1 è riportata la struttura della home page dei sito www.unirc.it, attuale sito web di
Ateneo.
Figura 2.1 - Home Page dell’attuale sito Unirc
Partendo dall’alto, si ha un header semplice con il logo dell’Università e tre menù:



menù di login Docente| Studente| Personale;
selezione della lingua;
webmail | contatti| cerca| rubrica.
Subito dopo è presente uno slider contenente le ultime notizie riguardanti l’Ateneo. Naturalmente,
vi è il menù principale e dei percorsi rapidi(sottomenù). Nella parte inferiore della pagina troviamo la
barra news, il footer ed e un piccolo slider. Gli elementi occupanti la maggior parte dell’interfaccia
sono:


lo slider;
il menù principale, con i suoi sottomenù.
Conclusa la descrizione della struttura, inizia l’analisi SWOT. Questa home page dà una grande
importanza alle notizie principali. Lo slider cattura l’attenzione al primo sguardo, poiché occupa una
Giorgio Baldassarre
25
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
sostanziale parte della pagina, senza, però, fornire informazioni a tutte le tipologie di utenza. Secondo
la UX, un elemento deve essere dimensionato in funzione della sua importanza.
Il layout grafico della home page non è compatibile con un sito web di Ateneo. La scelta grafica
slider è semplicemente da ridimensionare. Il menù, invece, è eccessivamente testuale. È corretto che
l’utente conosca le parti interne della sezione ancor prima di entrarvi, ma dobbiamo pensare ad un
modo per fargli capire il contenuto della sezione, senza costringerlo a leggere tutto il sottomenù.
Tenendo conto dell’intera pagina, la navigazione non è complessa per un utente che conosce il sito,
ma un nuovo utente si trova penalizzato di fronte al menù esteso e ad uno slider che lo constringerebbe
a scrollare, nel caso in cui lo schermo del dispositivo non fosse abbastanza grande (Figura 2.2). La
mancanza di responsiveness permane in tutto il sito.
Figura 2.2 – Attuale portale Unirc come viene visto da smartphone (con zoom)
26
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Il sito diventa difficilmente navigabile da smartphone. Questo è un grosso punto a sfavore del sito
attuale, poiché la navigazione da smartphone è molto diffusa oggi. Passiamo alla navigazione pura,
relativa alle pagine interne.
La Figura 2.3 mostra la sezione Studenti dell’attuale sito di Ateneo.
Figura 2.3 - Struttura della pagina interna “Studenti”
Il menù principale viene incluso nell’header. Subito in basso è presente un menù breadcrumb, il
quale permette all’utente di capire la sua posizione all’interno del sito. L’aspetto che colpisce
maggiormente è la presenza dei numerosi menù: trascurando i menù in alto ed il principale, già
presenti nella home, abbiamo la barra di navigazione laterale ed un sottomenù (avvisi, servizi online,
helpdesk, etc.), il quale varia con la sezione. Questo è il risultato di una classificazione non efficiente
dell’informazione. Un nuovo studente, durante i primi accessi al sito, non saprebbe dove guardare. Il
contenuto è ben gestito, con l’utilizzo congiunto di testi e immagini. Nella aree riservate, la grafica
rimane coerente con la home e la pagina interna appena vista. In Figura 2.4 vi sono i risultati dell’analisi
SWOT. I punti di forza sono quasi dominati dai punti di debolezza e dalla minaccia.
Per evitare l’acquisto di nuovi software da parte dell’Ateneo, vi è un’unica opportunità, ovvero
lavorare con un CMS. Una scelta del genere renderebbe rapide ed efficienti tutte le operazioni
riguardanti tanto la grafica quanto le scelte implementative, rendendo possibile la riprogettazione
totale di un sito di tali dimensioni in tempi brevi.
Giorgio Baldassarre
27
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 2.4 - Analisi SWOT del sito di Ateneo
2.3 Scelta del CMS
2.3.1 Perché scegliere un CMS
Un CMS (Content Management System) è uno strumento software, installato su un server web, il
cui scopo è quello di facilitare la gestione dei contenuti di un sito web.
Con un CMS la creazione e la gestione delle pagine diventa un’operazione molto semplice e quasi
istantanea: la programmazione web, infatti, è ridotta al minimo. Conviene utilizzare un mezzo del
genere per avere delle soluzioni grafiche/implementative già pronte, le quali, poi, potranno essere
riutilizzate direttamente o modificate al variare del bisogno.
28
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Creare un sito web da zero senza un CMS non è conveniente, sia in termini di tempo che in termini
di flessibilità. Ad esempio, per modificare la grafica in un sito già concluso, senza un CMS ci vorrebbe
molto tempo; con un CMS basterebbero pochi click. I vantaggi di un approccio basato sul CMS sono
molteplici. Poiché stiamo parlando di un sito di Ateneo, non possiamo permetterci approcci statici: il
sito deve potersi evolvere flessibilmente nel tempo. Esistono vari CMS, per cui bisogna fare una scelta.
I più utilizzati sono i seguenti, i cui simboli sono rappresentati nella Figura 2.5:



WordPress;
Joomla;
Drupal.
Figura 2.5 - I principali CMS esistenti
Tutti e tre sono sviluppati in PHP e si appoggiano ad un DMBS MySQL, ma le loro curve di
apprendimento e le loro filosofie di funzionamento sono differenti.
Drupal è il CMS più potente, ma anche il più difficile da imparare. Può essere utilizzato per
qualunque tipo di siti web ed è plugin-oriented, cioè le sue funzionalità possono essere estese tramite
l’installazione di componenti software esterni detti plugin.
Joomla! è un CMS di media difficoltà, viene utilizzato principalmente per siti di E-commerce ed il
suo funzionamento è regolato da 3 tipi di estensioni: plugin, moduli e componenti.
WordPress è il CMS più semplice e diffuso dei tre, infatti lo si apprende in poco tempo e, una volta
capita l’installazione dei plugin, si ha a che fare con un prodotto ricco di funzionalità. Essendo il più
diffuso dei tre, i plugin che disponibili per il download sono tantissimi.
Nel seguito vedremo WordPress, essendo quest’ultimo il CMS adottato per il nuovo sito web di
Ateneo.
Giorgio Baldassarre
29
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
2.3.2 WordPress
WordPress è il CMS più semplice e più diffuso (più di 140 milioni di download). La sua curva di
apprendimento (Figura 2.6) è la migliore dei tre CMS; infatti lo si apprende in pochi giorni.
Figura 2.6 - Curve di apprendimento dei tre principali CMS
All’inizio può sembrare scarno e privo di funzioni, ma dopo aver fatto pratica, si comprende la
potenza di un CMS del genere. Un plugin è un componente aggiuntivo del CMS, occupa dello spazio e
aggiunge delle funzionalità al sistema. Bisogna installare solo i plugin davvero utili, o si rischia di
scaricarne in numero eccessivo per risolvere ogni singolo problema che incontriamo. Un plugin deve
essere cercato solo se la funzionalità da esso svolta manca totalmente o non è facilmente
implementabile. L’esempio migliore è il plugin per la lingua, il quale è un must per qualunque sito Web
serio. Se non ci fosse un prodotto del genere, dovremmo progettare da zero un modo per rendere il
sito multilingua. La scelta di WordPress come CMS di supporto per il nuovo sito web di Ateneo è stata
dettata dalle seguenti considerazioni:




è il sistema con l’apprendimento più rapido;
è CMS più diffuso;
ha un’ottima flessibilità;
garantisce un numero enorme di funzionalità (è il CMS con più plugin disponibili).
Una scelta del genere cambia totalmente la progettazione di un sito web, perchè viene risparmiato
tutto il tempo che sarebbe stato utilizzato nel creare un sito da zero. Poiché abbiamo utilizzato la User
Experience, il CMS non fa altro che aiutarci a soddisfare i bisogni dell’utente.Tutto il tempo investito
nelle fasi di discovering e testing viene “riconquistato” grazie alla velocità del CMS. Per esempio, la
creazione di una nuova pagina web si attua cliccando su pagine->nuova pagina. La semplicità del CMS
sarà il mezzo chiave nell’implementazione del sito di Ateneo. Esso, infatti, è l’ideale per lavorare in
gruppo: basta che un collaboratore conosca WordPress e potrà farlo capire agli altri in pochissimo
tempo.
30
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Una volta che sono note le potenzialità di base del CMS, ci si può spingere oltre e, studiando PHP
e MySQL, si potranno implementare funzioni extra, senza dover necessariamente ricorrere ad altri
plugin. Approfondendo le conoscenze di HTML e CSS, invece, si può modificare la grafica del tema
(template) scelto. Solo studiando nuove soluzioni, si può ottenere un sito unico nel suo genere.
Il nuovo sito di Ateneo viene sintetizzato in questi tre concetti:



tema standard (da noi scelto);
modifiche grafiche univoche;
modifiche funzionali univoche.
Lo strumento CMS, se ben utilizzato, non ha limiti.
2.4 User Experience Design applicato al nuovo sito di Ateneo
2.4.1 Discovering
Durante la fase di discovering, l’utente viene a contatto con il sito web per la prima volta: è la
raccolta dei requisiti. Con i metodi già visti in precedenza, siamo riusciti a capire cosa l’utente medio
vorrebbe vedere nel suo ideale sito web di Ateneo. Progettare un sito web di tali dimensioni richiede
un contatto molto attivo con l’utenza. Lo scopo è quello di ottenere una qualità delle informazioni tale
da poter effettuare una corretta strutturazione dei contenuti. Avendo a disposizione un CMS, è molto
semplice posizionare l’informazione in una determinata pagina.
Quale pagina scegliere? La stessa informazione dovrà essere presente in più pagine? Perché?
Grazie all’utente, siamo riusciti a sciogliere questi dubbi.
Quanti utenti analizzare? Il numero non è calcolabile a priori. Abbiamo coinvolto un numero di
persone crescente finché i pareri ricevuti hanno iniziato a convergere e darci il materiale per iniziare.
La quantità non è la grandezza determinante in questo contesto: in teoria basterebbe trovare
quell’utente che ragioni in modo tale da rendere semplice il sito per tutti gli altri.
Abbiamo intervistato i diretti interessati del sito; le tipologie di utenti intervistati sono:




docenti;
personale tecnico amministrativo(PTA);
studenti della Mediterranea;
studenti delle scuole superiori.
Giorgio Baldassarre
31
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Il sito è uno solo, ma gli stakeholder (i destinatari del sito) sono tanti e di tipo differente. Lo scopo
è soddisfare tutti i bisogni; nessuno deve esser trascurato: qui entrano in gioco i princìpi della User
Experience.
Interviste ai docenti
Stakeholder interni e figure chiave dell’Università, i docenti utilizzano spesso il sito web di Ateneo.
Essi utilizzando l’area riservata per creare mailing list, per comunicare con gli studenti, per
pubblicare avvisi, e così via. Abbiamo cercato di capire come i docenti utilizzino principalmente il sito
e cosa crei loro difficoltà. In particolare, abbiamo cercato di individuare cosa essi pensano crei difficoltà
nei loro studenti. Dato il loro interesse verso la nostra iniziativa, le interviste di durata standard (30
minuti) sono invece arrivate a durare in media 43 minuti. In Figura 2.7 sono riportati i docenti
intervistati.
Figura 2.7 - Docenti intervistati
In quanto stakeholder interni, essi non hanno grandi difficoltà di navigazione, conoscono bene il
sito. Essi trovano il sito funzionale, ma riconoscono la sua difficoltà per chi lo consulta da poco tempo
o, ancora peggio, per la prima volta. I docenti osservano che:



32
la home page è chiara, ma non dirige l’informazione verso gli studenti;
lo slider focalizza l’attenzione su news ed eventi, elementi che non necessariamente
interessano gli studenti;
il sito non è costruito male, ma risulta poco attrattivo.
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
I docenti sono d’accordo coi principi della UX. La User Interface (UI) del sito non è fatta per l’utente
di tipo studente.
Non molti studenti utilizzano gli strumenti del sito (mailing list), sebbene funzionalmente siano
molto utili, sicuramente a causa della scarsa attrattività delle interfacce.
Dopo averci comunicato le loro impressioni, i docenti intervistati hanno suggerito di:



alleggerire il carico testuale, lasciando le informazioni realmente utili;
strutturare meglio i contenuti del sito;
costruire una home page pensata principalmente per gli studenti.
Interviste al Personale Tecnico Amministrativo(PTA)
Il Personale Tecnico Amministrativo comprende tutti coloro che lavorano all’interno dell’Università
con compiti ben precisi all’interno di una determinata struttura. Essi si occupano della gestione dei dati,
della pubblicazione di avvisi e bandi e del supporto agli studenti; perciò, sono gli utenti più assidui del
sito e conoscono bene i limiti degli studenti nell’utilizzo del portale di Ateneo. Le interviste sono
diventate rilassanti chiacchierate, in quanto i membri del PTA si sono mostrati molto interessati
dall’iniziativa.
Figura 2.8 – Componenti del PTA intervistati
Essi assistono gli studenti in difficoltà (supporto), perciò sanno bene cosa andrebbe migliorato nel
sito web. Consigliano di:





rendere il sito meno testuale, utilizzando più parole chiave;
rendere la navigazione più semplice;
dare l’idea che il sito sia in continuo aggiornamento;
strutturare meglio i contenuti;
verificare l’esattezza dei dati presenti.
Giorgio Baldassarre
33
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
I consigli forniti sono diretti a migliorare il sito per gli studenti; infatti, i membri del PTA non hanno
difficoltà particolari, essendo abituati al sito attuale.
Gli accorgimenti da effettuare sono di vario tipo, ma comprensibili: ogni studente avrà,
sicuramente, avuto delle difficoltà di questo genere.
Interviste agli studenti della Mediterranea
Utilizzatori principali del sito web, gli studenti dell’Università ci hanno comunicato le loro modalità
di utilizzo ed i problemi affrontati navigando nel sito. Il loro utilizzo è principalmente a scopo
informativo: essi cercano i bandi, le news Erasmus, informazioni sul Job Placement, e tutto ciò che
riguarda le lezioni frequentate.
Figura 2.9 - Studenti dell’Università intervistati
Dalla loro opinione traspare molta negatività. Essi vengono “investiti” da eventi e news e non
riescono a trovare ciò per cui hanno iniziato la navigazione nel sito.
Inoltre, entrando in una pagina interna, il sito diventa “labirintico” e la loro informazione sembra
allontanarsi sempre di più. Essi chiedono un miglioramento dell’intuitività del sito, altrimenti la
navigabilità rimarrebbe molto complessa.
34
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Le informazioni di cui uno studente ha bisogno sono quasi nascoste, messe in secondo piano
rispetto alle news di Ateneo, le quali, a loro parere, non dovrebbero avere questo peso.Tutti sono
d’accordo su due punti chiave:


è necessario migliorare la navigabilità;
è necessario focalizzare l’attenzione su contenuti realmente interessanti per gli studenti.
Interviste agli studenti delle scuole superiori
Diretti destinatari del sito web, questi utenti cercano poche ma utili informazioni, con l’intenzione
di iscriversi all’Università. Il primo impatto del sito potrebbe essere determinante per avere nuove
matricole.
Figura 2.10 - Studenti delle superiori intervistati
Gli studenti delle superiori sono i primi visitatori del sito e credono che esso debba essere attrattivo
dalla prima visita per dare una buona impressione dell’Università. La prima sezione da loro aperta è
quella dell’orientamento e poi, naturalmente, quella relativa ai corsi attivi. Consigliano di enfatizzare
queste sezioni per rendere la navigazione piacevole. In quanto destinatari del sito, si è scelto di
effettuare del testing, lasciandoli navigare liberamente nel sito attuale. Appena entrati in una pagina
interna, essi hanno iniziato ad avere difficoltà a causa del doppio menù (principale/laterale). Essi non
giudicano il menù complesso in sé, ma ricco di testi non proprio intuitivi. A parer loro, servirebbe:





maggiore intuitività nella navigazione;
ristrutturazione dei contenuti mancanti/danneggiati;
una descrizione più semplice dei passi per iscriversi;
un sito meno testuale;
una visualizzazione delle esperienze post universitarie degli studenti iscritti.
Scelta l’Università, il sito è la prima barriera che uno studente incontra. Esso deve essere costruito
principalmente per gli studenti, altrimenti si rischia che questi ultimi vengano scoraggiati (durante la
navigazione) ancor prima di entrare a contatto con l’Ateneo.
Giorgio Baldassarre
35
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
2.4.2 Strutturazione dei contenuti
Dopo aver ascoltato inizialmente l’utenza, abbiamo iniziato a strutturare i contenuti e a creare le
sezioni. Così viene sviluppata l’architettura dell’informazione, senza la quale il sito non avrebbe ragion
d’esistere. Un’architettura efficace permette la creazione di un sito efficace. Abbiamo usato i metodi
del Brainstorming per ottenere informazioni a livello più basso; con queste metodologie l’utente stesso
crea il menù principale e, successivamente, seleziona il contenuto. Dando questa possibilità all’utenza
adatta, si ottiene un ottimo risultato. Per esempio, l’area Didattica si progetta col personale della
didattica, ascoltando anche gli studenti, i quali aprono molto spesso tale sezione. Così facendo
abbiamo ottenuto la struttura di primo livello mostrata in Figura 2.11. La struttura ad albero è divisa in
quattro rami per una migliore resa grafica e soprattutto per la resa concettuale; dalla home page si
possono raggiungere varie aree del sito.
2.4.3 Evoluzione Grafica
Fissata l’architettura dell’informazione,
abbiamo iniziato ad abbozzare le pagine del
sito tramite i mockup. Nel fare tale attività
abbiamo scelto il tool Balsamiq Mockups. Un
mockup è un mezzo di modellazione grafica,
molto utilizzato in ambito web. Con esso è
possibile creare la grafica di un sito web in
pochi click, senza dover effettivamente mettere mano su codice.
Tenendo in memoria lo storico dei mockup, inoltre, è possibile ricostruire gli step grafici che ci
hanno permesso di raggiungere un determinato risultato. Questo è quello che abbiamo fatto;
abbiamo, infatti, rilasciato varie versioni dei mockup, dalla versione zero alla versione tre. Ci mostra il
posizionamento degli elementi con una grafica abbozzata, ma ci permette di vedere un’anteprima
delle pagine principali del sito. Effettivamente, ottenere una tale grafica in qualche click (2-3 minuti) ci
conviene. In questo modo saremo obbligati a metter mano al codice solo alla fine, quando i mockup
saranno approvati.
36
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 2.11 – Mappa di primo livello della struttura del nuovo sito di Ateneo
Giorgio Baldassarre
37
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Versione 0 dei mockup
Questa è la primissima versione del sito. Sono stati abbozzati l’header, il footer e lo slider delle
news. Il menù è semplicissimo; è presente la scritta “Io sono” al posto di Home perché si è pensato di
orientare la pagina principale verso l’utente.
Figura 2.12 - Versione 0 del mockup relativo alla home page del sito
38
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Versione 1 dei mockup
Già da questa versione entra in gioco la UX: La grafica della Home cambia totalmente con
l’inserimento dei tile (Figura 2.13).
Figura 2.13 – Versione 1 del mockup relativo alla home page del sito
La home page a sinistra, con slider e slogan, è stata ipotizzata e poi scartata. La home page a destra
con tile in primo piano e news scorrevoli è stata portata avanti. L’header è stato arricchito con:



contatti principali (telefono, fax, email);
social (Twitter, Facebook, Youtube);
bandierine per la selezione della lingua.
Nel lato destro è stato inserito un menù a tendina per le pagine degli utenti interni (S=studente,
L=laureato, D=docente, D=dottorato, P=PTA).
In Figura 2.14 vengono riportate due pagine interne, relative agli studenti e alle lauree triennali.
Giorgio Baldassarre
39
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 2.14 – Versione 1 dei mockup relativi agli studenti e alle lauree triennali
Dalla home page, cliccando sulla “S” del menù a tendina, si raggiunge la pagina disegnata
esclusivamente per lo studente. Qui entra in gioco il concetto di personas (personaggio) della UX.
L’utente di tipo studente dovrà recarsi in questa pagina e avrà di fronte solo le informazioni a lui
utili, minimizzando la possibilità di perdersi o di andare incontro a informazioni che non lo interessano.
L’interfaccia a tile rende il tutto più semplice e intuitivo. Nella pagina relativa alle lauree triennali,
invece, si intravede un elemento di stile che verrà trattato in seguito: si tratta dell’accordion, un menù
a tendina molto particolare, il quale permette di espandere solo le sezioni che ci sono utili, lasciando
chiuse le altre.
Versione 2 dei mockup
Dalla Versione 2 iniziano i lavori di raffinamento. Dopo l’inserimento dei tile, il sito ha già preso
forma. La Figura 2.15 mostra la home page del sito prima e dopo aver cliccato su “intranet”. Sono state
effettuate due modiche sostanziali:


40
È presente il collegamento intranet nell’header per gli utenti interni al posto del menù
laterale.
Gli elementi del footer adesso sono raggruppati in Sito web instituzionale, Credits e
Sostieni; la divisione grafica è netta.
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 2.15 – Versione 2 dei mockup relativi alla home page del sito
L’intranet comprende dei collegamenti più intuitivi rispetto al mockup precedente grazie ai tile
(Studente, Docente, PTA, etc), in modo che l’utente riesca a raggiungere in modo rapido la sua area.
Versione 3 dei mockup
Questi sono i mockup della versione definitiva del sito web. Nella Figura 2.16 mostriamo uno di
questi mockup, relativo alla home page del sito. Lo stile a tile ora coinvolge sia news che eventi (i quali
prima non erano presenti). Nel footer ci sono state delle piccole modifiche testuali.
Giorgio Baldassarre
41
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 2.16 – Versione 3 dei mockup relativi alla home page del sito
2.4.4 Scelta del template
Un template è un tema, ovvero un insieme di scelte grafiche (colori, font, stili). In WordPress, la
scelta di un template è il primo passo per implementare un sito web. Il template, infatti, è la struttura
base alla quale potremo, poi, applicare modifiche HTML-CSS (grafiche) e PHP (implementative) per
ottenere esattamente ciò che abbiamo progettato nei mockup. Il template scelto si chiama
Polytechnic (Figura 2.17). Tale template supporta pienamente le scelte grafiche fatte in precedenza,
ovvero:

collegamenti a tile nella home;

grafica piacevole;

menù ad espansione nell’header;

interfaccia semplice.
42
Giorgio Baldassarre
Figura 2.17 - Polytechnic Template
Il template è stato scelto dopo un’attenta analisi: non solo rispetta le nostre scelte grafiche, ma è
compatibile con un ottimo plugin per la gestione della lingua e include vari plugin per rendere semplice
la personalizzazione dell’interfaccia.
Ne citeremo alcuni utilizzati:





Visual Composer; plugin per la creazione automatica di contenuti grafici del tipo tile,
accordion, tab. Offre tanti elementi inseribili in pochi click.
Max Mega Menu; permette di personalizzare il menù principale; è stato utilizzato per
mostrare i collegamenti dei siti dipartimentali all’hover del mouse;
Responsive Menu; crea un menu per smartphone solo quando la larghezza in pixel
dispositivo è al di sotto di 1200;
WPML (WordPress Multi Language); è uno fra i migliori plugin per la gestione di un sito
multilingua. È stato utilizzato per rendere il sito bilingue (italiano, inglese);
Tree View; ci permette di vedere il sito sotto forma di albero di pagine. In questo modo si
può individuare qualunque pagina in pochi click.
Questi sono solo alcuni dei circa 20 plugin utilizzati. Ciascun plugin è stato scelto perché realmente
utile, altrimenti occuperebbe spazio inutile.
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
2.4.5 Guida di stile
La guida di stile è un elemento d’obbligo per un sito serio,
come un sito di Ateneo. Creare una guida di stile significa
stabilire delle regole grafiche, le quali, se infrante,
impediranno la pubblicazione dei contenuti.
In un sito del genere, serve coerenza. Questa
potrebbe venire a mancare se più pagine venissero
scritte da persone diverse con regole personali differenti. La guida è un “contratto” che un
collaboratore del sito di Ateneo deve rispettare. Un utente qualunque si troverebbe confuso/stressato
nel vedere che il sito cambia stile quando si passa da un contenuto ad un altro. Prima di produrre un
contenuto, si stabilisce una regola di stile e questa dovrà essere utilizzata per ogni contenuto simile.
Se gli stessi contenuti avranno la stessa forma, il sito sarà graficamente coerente e la navigazione
sarà più leggera e intuitiva. Verranno riportate alcune delle regole fissate nella guida di stile.
Accordion
L’accordion è una struttura molto utile per rappresentare una media quantità di dati, divisi per
sezione, visualizzando solo le sezioni che decidiamo di aprire. Le altre rimangono chiuse. Con
l’adozione dell’accordion otteniamo un sito meno testuale: l’utente vedrà solo ciò che gli interessa.
Figura 2.18 - Accordion Chiuso
44
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 2.19 - Accordion Aperto
Tab
I tab dividono il contenuto della pagina in diverse sezioni, similmente agli accordion. La prima
sezione è, però, già visualizzata. I tab sono un ottimo strumento per filtrare un contenuto (Figura 2.20,
Laboratori filtrati per dipartimento). Se la pagina viene aperta da smartphone, i tab si compattano in
un menù a tendina (Fig. 2.21).
Figura 2.20 - Laboratori con tab
Giorgio Baldassarre
45
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 2.21 - Tab responsive
Tile
In pieno stile Windows 8, i tile (Figura 2.22) massimizzano l’esperienza utente, mostrando
un’anteprima del contenuto di una sezione senza obbligare l’utente a leggere lunghi testi.
Figura 2.22 – Tile presenti nel nuovo sito web di Ateneo
46
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
L’efficacia dei tile è nota; ma un utilizzo eccessivo potrebbe confondere l’utente. Per questo motivo
si è deciso di utilizzarli solo nella home page e nel livello immediatamente successivo. Dopo due click
dalla home, l’utente non vedrà tile, ma contenuto puro, con accordion e tab.
Menù di livello 3
Dopo due click dalla home page, l’utente si trova immerso nelle pagine interne. Egli deve essere
guidato bene, altrimenti rischierà di perdersi e l’esperienza di navigazione sarà molto negativa. Questo
menù lo farà navigare fra le sezioni del livello in cui si trova; è, inoltre, presente un pulsate per tornare
al livello superiore (Figura 2.23).
Figura 2.23 - Menù di livello 3
2.4.6 Sito web oggi
Analizzate la progettazione e l’evoluzione grafica, abbiamo portato il nuovo sito sul server di prova
h217.unirc.it, il quale può essere acceduto solo dagli utenti connessi alla rete universitaria. La
home page del nuovo sito di Ateneo è mostrata in Figura 2.24.
L’utilizzo dello UXD ha portato grandi vantaggi e soddisfazioni. Tuttavia, così come suggerito da
questo tipo di progettazione, è importante rimanere aperti nel futuro a suggerimenti e critiche
costruttive: solo dei progettisti con mentalità elastica potranno portare avanti un sito con architettura
flessibile ed in continua evoluzione.
Il nuovo sito di Ateneo è responsive in ogni sua parte: la navigazione da smartphone sarà
totalmente godibile, poiché il sito si adatta in automatico a qualunque dispositivo. Tale risultato è stato
ottenuto utilizzando delle regole CSS dette media screen, nelle quali si definiscono proprietà CSS
distribuite per sezioni di larghezza (width-max, width-min).
Giorgio Baldassarre
47
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 2.24 – Le home page del sito per desktop e smartphone
Il passaggio alle pagine personalizzate si effettua cliccando su percorsi rapidi, nell’header.
Figura 2.25 - Percorsi rapidi
48
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Il menù a tendina scenderà, mostrando i collegamenti alle aree degli utenti interni. Il sito di Ateneo
deve essere, inoltre, un sito “vetrina” verso i siti dipartimentali. I collegamenti verso i dipartimenti
devono essere quanto più semplici possibile, come richiesto dall’utenza stessa.
I simboli dei dipartimenti (con i link ai siti dipartimentali) saranno presenti all’hover (passaggio del
mouse) sulla voce DIPARTIMENTI del menù principale.
Figura 2.26 - Collegamenti ai siti dipartimentali
Il sito presente sul server di prova è attualmente in testing: saranno gli utenti a segnalarci eventuali
problemi o sezioni mancanti. Implementando un sito di tali dimensioni, è normale che qualche
dettaglio possa sfuggire; per questo motivo la UX promuove la cooperazione progettisti-utente.
L’utente non verrà mai abbandonato/trascurato, a favore di una realtà informatica fortemente
dinamica: egli è ormai “socio” del sito, è un collaboratore effettivo del progetto. Il testing mira al
perfezionamento del prodotto software, sia dal punto di vista implementativo che grafico. Gli utenti
potranno trasmetterci le loro sensazioni di fronte al sito e, allorquando essi manifesteranno delle
difficoltà di accesso ai contenuti, interverranno gli specialisti della UX.
Figura 2.27
Figura
- Software
2.27 Testing
Giorgio Baldassarre
49
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
50
Giorgio Baldassarre
Capitolo 3
Progettazione e realizzazione della componente
“Storie di successo”
In questo capitolo tratteremo le fasi della progettazione e realizzazione della sezione “Storie di successo”.
Iniziando dall’ideazione della sezione, analizzeremo la progettazione (mockup) e l’implementazione.
Infine, parleremo dei feedback degli utenti.
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
3.1 Analisi dei requisiti
La Sezione “Storie di successo” è stata ideata all’interno del laboratorio Barbiana 2.0 come
contenuto sperimentale e, in seguito a feedback positivi, è stata perfezionata e posizionata all’interno
della home page del sito di Ateneo.
Una storia di successo è la carriera di un ex studente della
Mediterranea, che è riuscito ad arrivare in alto, ottenendo un
ruolo importante nella società o lavorando in una delle
aziende più prestigiose. Pubblicando queste storie, noi
mostriamo agli utenti che le basi fornite dalla Mediterranea
sono molto complete e concrete: uno studente
particolarmente valido saprà usare le conoscenze acquisite
nel migliore dei modi e potrà arrivare dove vuole.
Nella realtà odierna, si è portati a credere che alcune
3.1 pregiudizi
Figura 3.1 - Figura
Italia senza
Università abbiano un valore alto e altre no; per questo
motivo la fuga di cervelli è assicurata. Pochi rimarrebbero al Sud sapendo che:


la loro laurea meridionale sarà discriminata rispetto alle altre;
al Nord si studia meglio.
Queste informazioni sono fallaci. Non si può giudicare un Ateneo solo perché si trova in una
determinata area geografica: la qualità del personale docente e dei futuri laureati viene così sminuita
a prescindere da tutto. Le storie di successo mostrano la realtà dei fatti.
Non solo la laurea della Mediterranea vale, ma è riuscita a far arrivare gli studenti in alto. Si parla di
ingegneri che lavorano alla Google, alla Microsoft, presso Aubay, alla Borsa Italiana. Di fronte a questi
fatti, gli studenti saranno incoraggiati a seguire questo percorso di studi, sapendo che la laurea del Sud
ha un grande valore, come ogni altra laurea.
3.2 Progettazione
L’impatto grafico è la chiave di questa sezione (Figura 3.2). La struttura scelta è il filtro a tab,
rispettando pienamente la guida di stile. Gli ex studenti sono così distribuiti per dipartimento e possono
essere cercati nella barra ricerca. Se uno studente fosse interessato ad ingegneria (ad esempio), gli
basterebbe cliccare su DICEAM o DIIES per leggere le storie di successo degli ingegneri. Per rendere il
tutto user-friendly, abbiamo posizionato le informazioni chiave (nome, traguardo, laurea, tweet,
biografia, azienda) in primo piano con delle icone specifiche.
52
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Cliccando sulla singola storia di successo (Figura 3.3), l’immagine e le informazioni chiave brevi si
spostano in primo piano e, in basso, vengono visualizzate quattro sezioni testuali sotto forma di tab:




la biografia;
attualmente, ovvero la posizione attuale dell’ex studente;
Mediterranea e successo, contenente gli elementi della Mediterranea che hanno permesso
all’ex studente di arrivare al successo;
perché Mediterranea, sezione contenente i motivi per i quali l’ex studente consiglierebbe
questa Università.
Nella parte finale della pagina potrebbe esser presente una galleria di foto, nel caso in cui l’ex
studente scelga di inviarle.
Figura 3.2 – Mockup relativo alle storie di successo
Giorgio Baldassarre
53
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 3.3 – Mockup relativo alla singola storia di successo
54
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
3.3 Implementazione
3.3.1 Database
Il contenuto di questa sezione è dinamico, ovvero cambierà nel tempo: ex studenti di successo ci
manderanno le loro storie, le quali dovranno essere pubblicate in questa sezione. Abbiamo gestito
questa dinamicità creando la tabella wpunirc_storia_successo nel database chiamato
wordpress, DBMS MySQL. La tabella presente i seguenti attributi:



















id; garantisce l’unicità della storia di successo;
nome;
cognome;
dipartimento; è il codice del dipartimento; con un mapping codice-nome verrà stampato
il dipartimento;
traguardo| traguardo_en; è il ruolo di successo raggiunto;
tweet| tweet_en; è il tweet, un piccolo messaggio di incoraggiamento scelto dall’ex
studente;
biografia| biografia_en; è la carriera dell’ex studente;
professione| professione_en; è il ruolo attuale;
attualmente| attualmente_en; è un testo in cui viene spiegato il ruolo attuale;
contributoMedi | contributoMedi_en; è un testo che verrà stampato nella tab
Mediterranea e successo;
consigliareMedi | consigliareMedi_en; è un testo che verrà stampato nella tab
Perché Mediterranea;
data_inserimento;
titolo_studio | titolo_studio_en; è la laurea dell’ex studente;
anno_conseguimento; è l’anno in cui è stato conseguito il titolo di studio;
azienda; è l’azienda in cui lavora;
città; è la città in cui vive;
nazione; è la nazione in cui vive;
email;
timestamp.
Alcuni campi sono presenti in due lingue in modo tale da poter essere dinamicamente richiamabili
dalla funzione get_translate_db che vedremo in seguito.
Giorgio Baldassarre
55
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
3.3.2 Funzioni PHP
Per poter prelevare dati dal database e per poterli
stampare in HTML, bisogna scrivere delle funzioni apposite
nel file PHP chiamato functions. Queste funzioni
verranno, poi, chiamate nel modello PHP della pagina
dinamica. Le funzioni implementate per questa sezione
sono due. La prima è get_storie_successo; essa prende in ingresso le seguenti variabili:



chiave_Ricerca; serve a gestire la ricerca da parte dell’utente; se quest’ultimo non
effettua alcuna ricerca, la variabile chiave_Ricerca è vuota;
dipartimenti; gestisce i filtri per dipartimento delle storie di successo;
language; gestisce la visualizzazione nelle lingue italiano e inglese.
Essa restituisce un array contenente le storie di successo.
La seconda è get_storia_successo; essa riceve in ingresso le seguenti variabili:


id; è la chiave della tabella; permette di richiamare una specifica storia di successo;
language; gestisce la visualizzazione nelle lingue italiano e inglese.
Essa ritorna un array con la storia di successo corrispondente a quell’id. Questa funzione viene
utilizzata per visualizzare la singola storia di successo. Quando l’utente clicca su una storia, l’Id di
questa viene passato alla pagina successiva, che richiama questa funzione e stampa tutte le
informazioni sull’ex studente scelto. Nelle prossime sottosezioni illustreremo più in dettaglio le due
funzioni.
Funzione get_storie_successo( )
Caso 1
La funzione presenta vari casi. Il codice della funzione in questo caso è riportato nel Listato 3.1.
In rosso vengono evidenziate la dichiarazione della funzione e le variabili in ingresso. Sempre in
rosso viene evidenziato l’inizio dell’if. In verde sono evidenziate le dichiarazioni di tre variabili:

Language; questa riceve il contenuto della variabile language “ripulita” dagli spazi tramite
la funzione trim;

Lf; questa riceve il risultato della funzione get_language_extension, la quale riceve
una stringa (language) e restituisce una stringa vuota, se language=”_it”, altrimenti
lascia invariata la stringa in ingresso;
56
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …

Wpdb, variabile globale molto importante, effettua la connessione al database wordpress;
wpdb=wordpress database.
Se la chiave di ricerca è vuota e l’utente ha selezionato tutti i dipartimenti o nessun dipartimento,
la funzione restituisce tutte le storie di successo. Tramite la funzione $wpdb->get_results
($query) viene effettuata la query SQL, scritta in corsivo azzurro. Il risultato viene salvato nella
variabile $rows. La funzione get_translate_db è molto utilizzata, come si nota dal codice; essa
non fa altro che aggiungere un suffisso ai campi della tabella, nel caso in cui la lingua sia diversa
dall’italiano. Se la lingua è l’italiano, lf è una stringa vuota (come spiegato sopra); perciò i dati
verranno prelevati dai campi in italiano. Se la lingua è l’inglese, lf sarà uguale a “_en”, perciò i dati
verranno prelevati dai campi della tabella con suffisso “_en”.
I campi id, nome, cognome, dipartimento sono prelevati direttamente, mentre gli altri
sono contenuti bilingue e viene, perciò, richiamata la funzione get_translate_db.
function get_storie_successo($Chiave_Ricerca, $Dipartimenti,
$language) {
$language = trim($language);
$lf = get_language_extension($language);
global $wpdb;
if(empty($Chiave_Ricerca) && (empty($Dipartimenti) ||
$Dipartimenti == "all") ) {
$rows = $wpdb->get_results("SELECT ss.id, ss.nome, ss.cognome,
ss.dipartimento, ".get_translate_db("ss.", "traguardo", $lf,
"").", ".get_translate_db("ss.", "tweet", $lf, "").",
".get_translate_db("ss.", "biografia", $lf, "").",
".get_translate_db("ss.", "professione", $lf, "").",
".get_translate_db("ss.", "attualmente", $lf, "").",
".get_translate_db("ss.", "contributoMedi", $lf, "").",
".get_translate_db("ss.", "consigliareMedi", $lf, "").",
ss.data_inserimento, ".get_translate_db("ss.",
"titolo_studio", $lf, "").", ss.anno_conseguimento,
ss.azienda, ss.citta, ss.nazione, ss.email "."FROM
wpunirc_storia_successo AS ss "."ORDER BY ss.data_inserimento
ASC);}
Listato 3.1 – Codice relativo al caso 1 della funzione get_storie_successo ( )
Giorgio Baldassarre
57
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Caso 2
Il codice della funzione in questo caso è riportato nel Listato 3.2.
In rosso è stato evidenziato l’elseif, inizio del caso 2. Se la variabile Chiave_Ricerca non
è vuota, vuol dire che l’utente sta effettuando una ricerca tramite la barra ricerca. Le chiavi di ricerca
possibili sono:

il nome;

il cognome;

il titolo di studio;

l’azienda.
L’utente potrebbe inserire caratteri speciali; perciò si effettua un prepare della query per
evitare qualunque tipo di problema o SQL-Injection.
elseif(!empty($Chiave_Ricerca)) {
$rows = $wpdb->get_results(
$wpdb->prepare("SELECT ss.id, ss.nome, ss.cognome,
ss.dipartimento, ".get_translate_db("ss.", "traguardo", $lf,
"").", ".get_translate_db("ss.", "tweet", $lf, "").",
".get_translate_db("ss.", "biografia", $lf, "").",
".get_translate_db("ss.", "professione", $lf, "").",
".get_translate_db("ss.", "attualmente", $lf, "").",
".get_translate_db("ss.", "contributoMedi", $lf, "").",
".get_translate_db("ss.", "consigliareMedi", $lf, "").",
ss.data_inserimento, ".get_translate_db("ss.",
"titolo_studio", $lf, "").", ss.anno_conseguimento,
ss.azienda, ss.citta, ss.nazione, ss.email "."FROM
wpunirc_storia_successo AS ss "."WHERE (ss.nome LIKE %s) OR
(ss.cognome LIKE %s) OR (ss.titolo_studio LIKE %s) OR
(ss.azienda LIKE %s) "."ORDER BY ss.data_inserimento ASC",
"%".$Chiave_Ricerca."%", "%".$Chiave_Ricerca."%",
"%".$Chiave_Ricerca."%", "%".$Chiave_Ricerca."%"));}
Listato 3.2 – Codice relativo al caso 2 della funzione get_storie_successo()
58
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Caso 3
Il codice della funzione in questo caso è riportato nel Listato 3.3. In rosso è evidenziato l’elsif,
inizio del caso 3. Se l’utente ha cliccato su un dipartimento, la variabile Dipartimenti non è vuota.
In questo caso la funzione restituisce solo le storie di successo relative al dipartimento selezionato
nella variabile rows.
elseif(!empty($Dipartimenti)) {
$rows = $wpdb->get_results(
$wpdb->prepare(
"SELECT ss.id, ss.nome, ss.cognome,
ss.dipartimento, "
.get_translate_db("ss.", "traguardo", $lf, "").",
".get_translate_db("ss.", "tweet", $lf, "").", "
.get_translate_db("ss.", "biografia", $lf, "").",
".get_translate_db("ss.", "professione", $lf,
"").", ".get_translate_db("ss.", "attualmente",
$lf, "").", ".get_translate_db("ss.",
"contributoMedi", $lf, "").",
".get_translate_db("ss.",
"consigliareMedi", $lf,
"").",ss.data_inserimento,
".get_translate_db("ss.", "titolo_studio", $lf,
"").", ss.anno_conseguimento, ss.azienda,
ss.citta, ss.nazione, ss.email "."FROM
wpunirc_storia_successo AS ss "."WHERE
ss.dipartimento = %d "."ORDER BY
ss.data_inserimento ASC",$Dipartimenti));}
return $rows;}
Listato 3.3 – Codice relativo al caso 3 della funzione get_storie_successo()
Funzione get_storia_successo( )
Il codice della funzione è riportato nel Listato 3.4. Questa funzione effettua i seguenti task:

effettua una connessione al database di wordpress tramite la variabile wpdb;

preleva la storia avente l’id passato in input ad essa;

salva la storia di successo nella variabile rows;

restituisce rows.
La variabile Language serve a gestire i campi multilingua.
Giorgio Baldassarre
59
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
function get_storia_successo($id, $language)
{
global $wpdb;
$rows=$wpdb->get_results(
"SELECT *
FROM wpunirc_storia_successo as ss
WHERE ss.id =".$id.";"
);
return $rows;
}
Listato 3.4 – Codice della funzione get_storia_successo()
Funzione get_json_data( )
La barra di ricerca delle storie di successo è stata implementata tramite JavaScript, per garantire
un alto livello di dinamicità, fornendo all’utente i risultati della ricerca ancor prima che egli prema invio,
evitando ulteriori tempi di attesa. JSON è un formato per lo scambio di dati. Grazie al codice JavaScript,
l’utente può visualizzare il risultato della ricerca mentre sta digitando. Questo risultato si ottiene con
un oggetto di tipo JSON: mentre l’utente digita qualcosa, il server esegue la funzione
get_json_data(), la quale include get_storie_successo() vista sopra.
La funzione get_json_data() riceve quattro parametri:




key; è la chiave di ricerca ( verrà passata a get_storie_successo() );
dip; è il dipartimento che ( verrà passato a get_storie_successo() );
language;è lingua ( verrà passata a get_storie_successo() );
type; definisce il tipo di file JSON che la funzione dovrà fornire.
La funzione è stata utilizzata per diverse sezioni (Rubrica, Laboratori, Storie di successo); perciò, il
parametro type farà capire alla funzione in quale caso si trova. Se type=”laboratori”, la
funzione agirà in modo tale da restituire i laboratori. Se type=”rubrica”, la funzione restituirà i
contatti cercati. Analizzeremo in dettaglio il caso type=”storiedisuccesso”. Il corrispettivo
codice è riportato nel Listato 3.5. L’elseif in rosso ci mostra l’ingresso nel caso in cui
type=”storiesuccesso”.
Viene chiamata la funzione get_storie_successo ed il risultato viene salvato nella variabile
searchStorie. Tramite l’istruzione foreach scorriamo l’array searchStorie e salviamo i dati
utili nelle variabili nome, cognome, ecc. In verde vengono eseguiti dei controlli per stampare un campo
60
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
(ad esempio, il traguardo) e la sua corrispettiva immagine. Se il campo è vuoto, la stringa
corrispondente sarà vuota. Infine, l’array dei risultati rowArray viene copiato in arrayEncode, il
quale viene codificato tramite json_encode e ritornato dalla funzione.
elseif($type =="storiedisuccesso"){
$arrayEncode = $rowArray = array();
$searchStorie=get_storie_successo($key, $dip, $language);
foreach ($searchStorie as $obj) {
$cognome = $obj->cognome; $nome = $obj->nome;
if($obj->traguardo){
$traguardo= " <img src=\"/public/img/icon/metrostyle
/traguardo.png\" > ".$obj->traguardo;}else{$traguardo='';}
if($obj->tweet){
$tweet = "<img src=\"/public/img/icon/metrostyle/tweet.png\">
".$obj->tweet;}else{$tweet ='';}
if($obj->titolo_studio){
$titolo_studio="<imgsrc=\"/public/img/icon/metrostyle
/titolostudio.png\"> ".$obj->titolo_studio;}
else{ $titolo_studio=''; }
if($obj->azienda){
$azienda=get_immagine("logo_azienda", "160x160",
$obj->azienda, $lang_data['FLAG_LANG']);
}else{$azienda = '';}
$rowArray['id'] = $obj->id;
$rowArray['persona'] = strtolower("$cognome
$nome");$rowArray['traguardo'] = $traguardo;
$rowArray['tweet'] = strtolower($tweet);
$rowArray['descrizione'] = taglio(strip_tags
($obj->attualmente), 300);
$rowArray['titolo_studio']=$titolo_studio;
$cognome = cleanString($obj->cognome);
$nome = cleanString($obj->nome);
$rowArray['imageSrc'] = get_immagine("storie_successo_gen",
"160x160", $obj->id."-".ucwords(strtolower($nome))."".ucwords(strtolower($cognome)) , $language);
$rowArray['azienda']= $azienda;$rowArray['link_storia'] =
$lang_data['STORIESUCCESSO_LINK'].$lang_data
['STORIASUCCESSO_LINK']."?id=".$obj->id;
array_push($arrayEncode,$rowArray);}
return json_encode($arrayEncode);}
Listato 3.5 – Codice relativo alla funzione get_json_data() nel caso in cui
type=”storiesuccesso”
Giorgio Baldassarre
61
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
3.3.3 Modelli delle pagine
WordPress mette a disposizione dei modelli standard per la creazione rapida delle pagine.
Nel caso di contenuto dinamico, il modello della pagina deve essere creato appositamente.
I modelli da noi implementati comprendono:




header, comune a tutte le pagine;
footer, comune a tutte le pagine;
codice PHP specifico per richiamare il contenuto dinamico;
codice JavaScript adatto alla grafica utilizzata.
Il codice non farà altro che utilizzare le funzioni precedentemente viste, aggiungendo la grafica. La
grafica scelta è quella specificata nella guida di stile. Come detto in precedenza, se un contenuto non
rispettasse le regole della guida di stile non potrebbe nemmeno essere pubblicato. Per ogni pagina
dinamica, abbiamo implementato:


funzioni PHP specifiche;
un modello PHP, che richiama le funzioni specifiche.
Il codice JavaScript (nel seguito, JS) si comporta in modo diverso. Se utilizziamo una struttura di
tipo tab o accordion, possiamo richiamare le stesse funzioni JS preimplementate.
Nel caso di una barra di ricerca, invece, bisogna scrivere un codice JS nuovo e aggiungere un caso
nel metodo get_json_data() perché è richiesto un file JSON specifico.
I modelli implementati per questa sezione sono due: il primo relativo alla pagina “storie di
successo” ed il secondo alla pagina “singola storia di successo”.
Il modello “Storie di successo”
Il modello PHP in questione comprende vari script JS e codice PHP atto a richiamare le storie di
successo al variare della richiesta da parte dell’utente (click su un dipartimento oppure ricerca tramite
barra di ricerca). Siccome il codice è piuttosto articolato, verranno riportati i passaggi principali del
modello. Gli script sono comuni ad altre sezioni; perciò, ci occuperemo del codice PHP specifico per il
richiamo (e la grafica) delle storie di successo dal database.
62
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
if ( (isset($_POST['filter'])) && (!isset($_POST['filterdip']) ||
empty($_POST['filterdip'])) ) {
if(empty($_POST['filter'])) {
$key = "";
} else {
$key = strip_tags($_POST['filter']);
}
echo
get_json_data($key,
"",
$lang_data['FLAG_LANG'],
"storiedisuccesso");
}
Listato 3.6 – Codice PHP per il filtraggio delle storie di successo
Quello mostrato nel Listato 3.6 è l’inizio del modello; si tratta di un controllo delle variabili di filtro.
Se il filtro è vuoto, la chiave di ricerca sarà vuota, altrimenti la chiave conterrà il nome del filtro.
Viene, poi, richiamata la funzione vista in precedenza, get_json_data()vista in precedenza.
Il seguente codice:
<?php get_header(); ?>
tanto breve quanto importante, richiama l’header nella pagina in cui si trova.
Dualmente, il seguente codice:
<?php get_footer(); ?>
si trova alla fine del modello e richiama il footer.
Barra di ricerca
Nella variabile lista_completa vengono salvate tutte le storie di successo esistenti nel
database. Se s0no presenti più di zero storie, la barra di ricerca viene visualizzata. Il corrispettivo codice
viene mostrato nel Listato 3.7. Il form per la ricerca è stato inserito con codice HTML contenente PHP.
I tag di apertura e chiusura del form sono evidenziati in rosso.
$lista_completa = get_storie_successo("", "",
$lang_data['FLAG_LANG']);
// Ricerca completa delle Storie di successo
if(count($lista_completa)>0)
{ ?>
<form id="searchform" method="get" action="<?php echo
$lang_data['STORIESUCCESSO_LINK']; ?>" role="search">
<input type="text" id="seach-text" placeholder="<?php echo
$lang_data['SEARCH']."
".$lang_data['STORIE_DI_SUCCESSO']; ?>" name="search"
class="course-search-field fourteen columns alpha" value="<?php
echo $search; ?>"
Giorgio Baldassarre
63
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
autocomplete="off">
<input type="submit" value="<?php echo $lang_data['SEARCH']; ?>"
alt="<?php echo
$lang_data['SEARCH']; ?>"
class="course-search-button two columns omega">
</form>
Listato 3.7 – Codice relativo alla gestione della barra ricerca
Filtro per dipartimento
Con questo codice, l’utente potrà scegliere il dipartimento di cui visualizzare le storie di successo. I
dipartimenti del database sono chiamati strutture, perciò vengono richiamati con la funzione
get_strutture() . Per ogni struttura, viene effettuato il controllo del filtro. Se il quest’ultimo rileva
la scelta dell’utente, il nome del dipartimento verrà salvato nella variabile nameDip, che servirà in
seguito. Nel Listato 3.8 viene mostrato il codice relativo alla gestione del filtro per dipartimento.
$struttTOT = get_strutture();
$strutture = explode(",",$struttTOT);
foreach ($strutture as $ad) {
if(isset($Dip_Lab) && get_siglastrutture("get_code",
strip_tags($Dip_Lab))==trim($ad)) {
$active = " active";}
else {$active = "";}
$nameDip = get_siglastrutture("get_name", trim($ad));
$menuNameDip = get_siglastrutture("display_name_menu", $nameDip);
$ulTab .= "<li class=\"singleTab ".trim($ad).$active."\"><a
href=\"".$lang_data['STORIE_LINK'].
$nameDip."/\" id=\"".trim($ad)."-".$nameDip."\" class=\"filterlist\">".$menuNameDip."</a></li>";
$selectOption .= "<option value=\"".trim($ad)."".$nameDip."\">".$menuNameDip."</option>";}
( (!isset($Dip_Lab)) || (isset($Dip_Lab) &&
strip_tags($Dip_Lab)=='all')) {
$active = " active";}
else {$active = "";}
Listato 3.8 – Codice relativo alla gestione del filtro per dipartimento
64
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Visualizzazione delle storie di successo
Avendo già effettuato il filtro per dipartimento, possiamo stampare le storie di successo.
L’istruzione foreach scorre le storie filtrate grazie all’utilizzo della variabile lista_filtrata. Le
informazioni principali vengono salvate nelle variabili nome, cognome, etc, mentre le immagini della
persona e del logo dell’azienda vengono ottenute tramite la funzione get_immagine() . In rosso è
stato riportato il div di apertura e chiusura principale, in verde i div minori. In blu è riportato il codice
atto alla stampa del contenuto dinamico con grafica. I div HTML sono dei semplici contenitori di
informazione; il nostro template di riferimento ha, però, definito delle regole CSS ben precise per ogni
classe e id dei div; perciò, siamo stati obbligati ad usare numerosi div (in questo caso sono dieci) per
ottenere una grafica coerente col template e, soprattutto, con la guida di stile. Il codice relativo alla
visualizzazione delle storie di successo è riportato nel Listato 3.9.
<?php $lista_filtrata = get_storie_successo($key, $dip,
$lang_data['FLAG_LANG']);
if(count($lista_filtrata)>0) {
foreach ($lista_filtrata as $lf) {
if(empty($lf->nome)) {
$nome = $lang_data['TITOLO']." ".$lang_data['NON_DISPONIBILE']; }
else {
$nome = $lf->nome." ".$lf->cognome; }
$descrizione = strip_tags($lf->attualmente);
$descrizione = taglio($descrizione, 350);
$linkLab = sluggify($nome);?>
<div class="vc_row wpb_row vc_inner vc_row-fluid type1">
<div class="vc_col-sm-3 wpb_column vc_column_container">
<div class="wpb_wrapper">
<div class="wpb_single_image wpb_content_element vc_align_left
type1">
<div class="wpb_wrapper">
<div class="vc_single_image-wrapper vc_box_border_grey
typeSuccesso">
<?php $cognomepulito = cleanString($lf->cognome); $nomepulito =
cleanString($lf->nome);
$imageSrc = get_immagine("storie_successo_gen", "160x160", $lf>id."-".ucwords(strtolower($nomepulito))."".ucwords(strtolower($cognomepulito)) ,
$lang_data['FLAG_LANG']);?>
<img width="160" height="160" title="<?php echo
ucwords(strtolower($lf->nome)); ?>" alt="<?php echo
ucwords(strtolower($lf->nome)); ?>" src="<?php echo $imageSrc; ?>"
class="vc_single_image-img typeSuccesso" >
Giorgio Baldassarre
65
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
</div></div></div></div></div>
<div class="vc_col-sm-9 wpb_column vc_column_container">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<h2 class="entry-title mod type2"><b><?php echo $nome; ?></b></h2>
<?php echo get_immagine("logo_azienda", "160x160", $lf->azienda,
$lang_data['FLAG_LANG']);
?>
<h4 class="entry-title mod type2"><img
src="/public/img/icon/metrostyle/traguardo.png"> <i>
<?php echo $lf->traguardo;?></i></h4>
<h4 class="entry-title mod type2">
<img src="/public/img/icon/metrostyle/titolostudio.png"> <i><?php
echo $lf->titolo_studio;?></i></h4>
<?php if( empty($lf->attualmente) || $descrizione == "Descrizione
o titolo non presente" )
$Descrizione = $lang_data['DESCRIZIONE']."
".$lang_data['NON_DISPONIBILE'];
else $Descrizione = $descrizione;?> <p><?php echo $Descrizione;
?></p>
<h4 class="entry-title mod type2"><img
src="/public/img/icon/metrostyle/tweet.png"><i>
<?php echo $lf->tweet;?></i></h4>
</div></div></div></div></div>
Listato 3.9 – Codice relativo alla visualizzazione delle storie di successo
Il modello relativo alle singola storia di successo
Il modello PHP in questione comprende vari script JS e codice PHP atto a richiamare la singola
storia di successo, cliccata dall’utente nella pagina “storie di successo”. Verranno riportati i passaggi
principali del modello. Gli script sono comuni ad altre sezioni; perciò, ci occuperemo del codice PHP
specifico per la sezione in esame. Proprio come nel modello precedente (e in tutti gli altri modelli),
vengono richiamati header e footer tramite il codice seguente:
<?php get_header(); ?>
<?php get_footer(); ?>
66
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Richiamo dell’id
Tramite il codice riportato nel Listato 3.10, viene effettuato il richiamo dell’id della storia di
successo in modo che questa possa essere trovata nel database e stampata nella pagina. Il codice
$storia=get_storia_successo($_GET["id"],$land_data['FLAG_LANG']) utilizza
la funzione get_storia_successo con in ingresso il GET[“id”], ovvero l’id passato dalla pagina
precedente. Avendo salvato la storia di successo nella variabile storia, possiamo prelevare tutti i dati
utili. Il titolo ed il breadcrumb vengono generati dinamicamente, utilizzando il nome ed il cognome del
protagonista della storia di successo.
<?php
$storia=get_storia_successo($_GET["id"],$land_data['FLAG_LANG']);
foreach($storia as $sc)
{ ?>
<div class="page-content clearfix" style="padding-top: 0px
!important;">
<div id="page-header" class="header-author">
<div class="content-left">
<div class="h1-breadcrumps">
<h1 class="entry-title"><?php echo $sc->nome." ".$sc->cognome
?></h1>
<div class="breadcrumbs">
<a href="/">Home</a>&gt;
<a href="<?php echo $lang_data["STORIESUCCESSO_LINK"] ?>" >Storie
di successo</a> &gt;
<?php echo $sc->nome." ".$sc->cognome ?> <br>
</div></div></div>
<?php $cognomepulito = cleanString($sc->cognome);
$nomepulito = cleanString($sc->nome);
$imageSrc = get_immagine("storie_successo_gen", "160x160",
$sc->id."-".ucwords(strtolower($nomepulito))."".ucwords(strtolower($cognomepulito)) ,
$lang_data['FLAG_LANG']); ?></div>
Listato 3.10 – Codice relativo al richiamo dell’ID della storia di successo
Giorgio Baldassarre
67
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Informazioni principali
Tramite il codice riportato nel Listato 3.11, vengono stampate le informazioni principali, ovvero
nome, cognome, titolo di studio, anno di conseguimento, città di residenza, azienda, dipartimento.
Avendo scelto $sc come alias della storia di successo nel foreach, il richiamo delle informazioni si
effettua con il codice $sc->campo_tabella. Questa operazione ci restituisce l’informazione senza
stamparla: la stampa viene effettuata anteponendo la parola chiave echo. Il codice finale è il seguente:
$sc->nome per stampare il nome;
$sc->cognome per stampare il cognome.
La visualizzazione va effettuata rispettando una determinata grafica (dettata dalla guida di stile;
perciò questo codice è immerso nei div.
<div class="storiasuccessodatibox">
<div class="storiaFoto">
<img class="imgStoria" src="<?php echo $imageSrc; ?>" alt="<?php
echo $sc->nome." ".$sc->cognome ?>">
</div>
<div class="storiasuccessodati">
<p align="center">
<span style="font-size:4rem;"><?php echo $sc->traguardo
?></span></p>
<p align="center">
<?php
if(file_exists($lang_data['STORIESUCCESSO_PATH_FUNCTION']."azienda
/".$sc->azienda.".jpg")) {
echo "<img
src=\"".$lang_data['STORIESUCCESSO_IMAGE_FOLDER']."azienda/".
$sc->azienda.".jpg\" alt=\"".$sc->azienda."\"/>";
}
elseif(file_exists($lang_data['STORIESUCCESSO_PATH_FUNCTION']."azi
enda/".$sc->azienda.".png")) {
echo "<img
src=\"".$lang_data['STORIESUCCESSO_IMAGE_FOLDER']."azienda/".
$sc->azienda.".png\" alt=\"".$sc->azienda."\"/>";
}else{echo "<span style=\"font-size:2rem;\">".
$sc->azienda."</span>";}
?> </p><?php if( $sc->citta != ''){ ?>
<p align="center">
<img src="/public/img/icon/metrostyle/indirizzo.png" alt="<?php
echo $lang_data["CITTA"]?>" /> <?php echo $sc->citta;
if($sc->nazione != '')
echo " (".$sc->nazione.")"; ?> </p>
68
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
<?php } ?>
<?php if ($sc->titolo_studio != ''){ ?>
<p align="center">
<span style="font-size:2rem"> <img
src="/public/img/icon/metrostyle/titolostudio.png" alt="<?php echo
$lang_data["TITOLO_DI_STUDIO"]?>"/>
<?php echo $sc->titolo_studio; ?> <?php if($sc>anno_conseguimento != '') echo " (".$sc->anno_conseguimento.")";
?> <br>
<?php echo $lang_data["DIPARTIMENTO"];
$dip=get_siglastrutture('get_name', $sc->dipartimento); echo "
".$dip; ?></span>
</p>
<?php } ?>
<p align="center">
<img src="/public/img/icon/metrostyle/tweet.png"> <span
style="font-size:2rem;"
<i><?php echo $sc->tweet;?></i></span><p></div></div>
Listato 3.11 – Codice per la stampa delle informazioni principali relativa ad una storia di successo
Informazioni testuali
Il codice riportato nel Listato 3.12 stampa le informazioni testuali delle storie di successo, ovvero la
biografia, nonché i contenuti delle sezioni “Attualmente”, “Mediterranea e successo”, “Perché
Mediterranea”.
Il primo blocco è il codice dei tab (viste nella guida di stile); come si può notare, c’è un tab per ogni
informazione testuale. Il secondo blocco trasforma i tab in un menù a tendina, se la pagina venisse
aperta da smartphone, infatti l’id è “tabsResponsive”. Il blocco in rosso, invece, stampa il contenuto
testuale nel tab corrispondente; in questo caso è la tab della biografia: nel modello è presente un tab
per ogni blocco testuale.
<ul class="tabs">
<li class="biografia"><a href="#biografia">Biografia</a></li>
<li class="attualmente">a href="#attualmente">Attualmente</a></li>
<li class="mediterranea"><a href="#mediterranea">Mediterranea e
successo</a></li>
<li class="perche"><a href="#perche">Perchè Mediterranea</a></li>
</ul>
<select id="tabsResponsive" name="tabsResponsive">
<option value="biografia" selected="selected">Biografia</option>
Giorgio Baldassarre
69
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
<option value="attualmente">Attualmente</option>
<option value="mediterranea e successo">Mediterranea e
successo</option>
<option value="perche mediterranea">Perchè Mediterranea</option>
</select>
<div id="biografia" class="blocco-tab" style="display: block;">
<div class="vc_row wpb_row vc_inner vc_row-fluid type1" >
<p><?php echo $sc->biografia; ?> </p>
</div></div>
Listato 3.12 – Codice per la stampa delle informazioni testuali relative ad una storia di successo
3.4 Feedback
La sezione “Storie di successo” è una sezione sperimentale
e, soprattutto, una novità nel sito web di Ateneo. Come tutte le
novità, deve essere ben supportata per ottenere una posizione
di spicco. Per questo motivo, è stata mostrata agli utenti per
capire quali reazioni potesse suscitare in essi.
3.4.1 Risultato grafico
Nella Figura 3.4 viene mostrata la sezione in versione desktop.
70
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 3.4 – La sezione “Storie di successo” in versione desktop
Figura 3.5 – Visualizzazione di una singola storia di successo per desktop
Giorgio Baldassarre
71
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Nella Figura 3.5 viene mostrata una singola storia di successo in versione desktop. È stata data la
massima importanza all’immagine dell’ex studente e alla sua posizione. In basso troviamo i testi
contenenti la sua storia divisa nella 4 sezioni, in precedenza spiegate.
Come si evince confrontando le tre figure, è possibile notare i seguenti cambiamenti:



le storie si compattano ad una colonna;
i tab si trasformano in un menù a tendina;
i contenuti si scalano ad una colonna.
Nella figura 3.6 vengono visualizzate le Figure 3.4 e 3.5 ma per come sono disposte su smartphone.
Figura 3.6 – Visualizzazione su smartphone del contenuto delle Figure 3.4 e 3.5
72
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
3.4.2 Feedback
I pareri su questa sezione sono stati differenti. Ci sono interlocutori che la vedono come una sezione
comune o inutile e interlocutori che la vedono come una novità assoluta (in positivo). La maggior parte
dell’utenza ha notato che l’Università ha bisogno di incoraggiare le iscrizioni, evitando un’eccessiva
azione di marketing e persuasione da parte dell’Università.
Le storie di successo incuriosiscono gli studenti e li fanno riflettere. Pochi penserebbero di poter
arrivare in alto nella società partendo da un’università del Sud, a causa dei pregiudizi che
accompagnano da sempre la nostra realtà. Perciò questa iniziativa piace e potrebbe incoraggiare lo
studio, oltre alle iscrizioni.
In breve, la sezione “Storie di successo”:




è ritenuta inutile da una parte dell’utenza;
fa capire agli studenti iscritti che non hanno limiti;
mostra agli utenti esterni il valore della Mediterranea;
fornisce agli studenti delle scuole superiori un buon motivo per iscriversi.
Il bilancio è più che positivo.
Figura 3.7 - Feedback Positivo
Giorgio Baldassarre
73
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
74
Giorgio Baldassarre
Capitolo 4
Progettazione e realizzazione della componente
“Presidio di Qualità”
In questo capitolo tratteremo le fasi della progettazione e realizzazione della sezione “Presidio di Qualità”.
Iniziando dall’analisi della sezione presente nell’attuale portale di Ateneo, illustreremo la progettazione
(mockup) e l’implementazione della sezione nel nuovo sito. Infine, descriveremo il risultato grafico.
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
4.1 Analisi dei requisiti
Il Presidio di Qualità di Ateneo (PQA) è un organismo operante ai fini dell’Assicurazione della
Qualità della Formazione e della Ricerca secondo le procedure di Autovalutazione, Valutazione e
Accreditamento (AVA). La sezione è, perciò, di fondamentale importanza, nonché d’obbligo, per un
sito di Ateneo. Essa comprende le seguenti sottosezioni:






composizione;
organizzazione e articolazione;
Sistema di Assicurazione della Qualità e sistema AVA;
documentazione utile;
eventi
funzioni e deleghe.
La quantità e, soprattutto, il tipo di informazioni della sezione devono essere gestiti in modo
specifico. La sezione è presente nell’attuale sito di Ateneo; perciò, il nostro compito consisterà nel
riportare le informazioni presenti, migliorando la strutturazione dei contenuti e adattando il tutto al
template scelto. Nella Figura 4.1 viene visualizzata la pagina principale della sezione. Essa è totalmente
testuale; sulla sinistra si nota il menù laterale, il quale permette l’accesso alle sottosezioni, in
precedenza citate. Esse hanno uno stile molto testuale, coerentemente con la pagina principale.
Tuttavia, vi è una sottosezione che richiede uno studio approfondito.
Figura 4.1 – Pagina principale della sezione “Presidio di Qualità”
76
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Essa è rappresentata nella Figura 4.2, ed è la sottosezione “Sistema di assicurazione della qualità e
sistema AVA”. Nelle sottosezioni del PQA si nota il medesimo stile testuale della pagina principale. In
questa particolare sottosezione, si nota un ulteriore menù che potrebbe confondere l’utente: la
quantità di informazioni presenti è tale da richiedere una strutturazione in più livelli, la quale costringe
l’utente ad effettuare molti click prima di ottenere l’informazione che cerca.
Figura 4.2 - Sistema di assicurazione della qualità e sistema AVA
4.2 Progettazione
In questa sezione, l’aspetto chiave è la strutturazione dei contenuti. Per gestire i collegamenti alle
sottosezioni, si è utilizzato il menù di livello 3, precedentemente citato nella guida di stile.
Analizziamo il mockup relativo alla pagina principale (Figura 4.3). Le informazioni puramente
testuali rimangono al centro della sezione, mentre i collegamenti alle sottosezioni sono stati
implementati con dei button; questi ultimi sono dei rettangoli contenenti il titolo della sottosezione.
Giorgio Baldassarre
77
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 4.3 – Mockup relativo alla pagina principale della sezione “Presidio di Qualità”
78
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Focalizziamo l’attenzione sulla sottosezione “Sistema di Assicurazione della Qualità e sistema
AVA”, il cui mockup viene visualizzato nella Figura 4.4. Il sottomenù laterale è stato sostituito con una
struttura a tab. All’interno della tab “Dipartimenti”, inoltre, vi è una struttura a doppio accordion; questa
scelta permette di filtrare i contenuti per dipartimento, evitando di mostrare all’utente una quantità
eccessiva di informazioni. In alto è presente il menù di livello 3, il quale garantirà una navigazione
semplificata fra le sottosezioni. Grazie a tali scelte grafiche, la sezione sarà navigabile con semplicità
da parte dell’utente, nonostante la quantità di informazioni memorizzate.
Figura 4.4 - Mockup relativo alla sottosez. “Sistema di Assicurazione della Qualità e sistema AVA”
Giorgio Baldassarre
79
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
4.3 Implementazione
La sezione è puramente statica; perciò non sarà presente codice PHP. Le pagine sono state
implementate utilizzando codice HTML-CSS (grafica) e codice JavaScript adatto alla struttura grafica
utilizzata (in questo caso abbiamo utilizzato tab e accordion).
4.3.1 Pagina principale
Nella pagina principale, come visto nei mockup, vi è un’introduzione testuale statica e i buttons, i
quali permettono l’accesso alle sottosezioni. Nel Listato 4.1 è presente il codice atto alla
visualizzazione della pagina principale. In verde viene evidenziato il paragrafo di testo contenente
l’introduzione, mentre in rosso viene evidenziato il codice di un button. Per visualizzare un button
coerente con la grafica del template, si è utilizzata la classe “button” del template stesso. Questo
codice è stato inserito direttamente nella pagina “Presidio di Qualità” tramite il plugin Visual Composer,
il quale è integrato nel template.
<p>Il Presidio della Qualità dell’Università Mediterranea di
Reggio Calabria è stato istituito con
delibere del Senato
Accademico (SA)...
</p>
<div class="containerPresidio">
<a title="Composizione" href="/?p=2039"
class="button">Composizione</a>
<a title="Organizzazione e Articolazioni" href="/?p=2041"
class="button">Organizzazione e Articolazioni</a>
<a title="Funzioni e deleghe" href="/?p=2047"
class="button">Funzioni e deleghe</a>
<a title="Sistema di Assicurazione della Qualità e Sistema AVA"
href="/?p=2042" class="button">Sistema di Assicurazione della
Qualità e Sistema AVA</a>
<a title="Documentazione Utile" href="/?p=2043"
class="button">Documentazione Utile</a>
<a title="Eventi" href="/?p=2044" class="button">Eventi</a>
</div>
Listato 4.1 – Codice relativo alla visualizzazione della pagina principale
80
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
4.3.2 Sistema di Assicurazione della Qualità e sistema AVA
Le sottosezioni, come visto nei mockup, comprendono un’ingente quantità di informazioni testuali
ed un menù di livello 3 (in alto). Per integrare questo tipo di menù nelle pagine, è stato utilizzato il
plugin IconeMenu, il quale ha permesso anche l’aggiunta di immagini per rendere il menù stesso più
intuitivo. Poiché le sottosezioni sono totalmente testuali, focalizzeremo l’attenzione sull’unica che ha
richiesto codice complesso per la visualizzazione, ovvero la sottosezione “Sistema di Assicurazione
della Qualità e sistema AVA”.
Strutture HTML
Per ottenere una efficiente strutturazione dei contenuti, è stato richiesto l’utilizzo congiunto di tab
e doppi accordion. Nel Listato 4.2 viene riportato il codice delle strutture HTML appena citate. I tab
utilizzati nella sottosezione sono tre, mentre gli accordion utilizzati sono sei. Poiché il codice dei tre tab
è identico, è stato riportato solo quello relativo ad un tab (codice evidenziato in rosso). Per lo stesso
motivo, è stato riportato solo il primo dei tre doppi accordion (codice evidenziato in blu). Dal punto di
vista implementativo, il codice è costituito da un insieme di div con struttura concentrica e regole CSS
ben definite (classi e id).
<div id="tab2" class="blocco-tab">
<div class="vc_separator wpb_content_element vc_sep_width_100
vc_separator_no_text vc_sep_color_grey">
<span class="vc_sep_holder vc_sep_holder_l"><span
class="vc_sep_line"></span></span>
<span class="vc_sep_holder vc_sep_holder_r"><span
class="vc_sep_line"></span></span>
</div>
<div class="vc_row wpb_row vc_inner vc_row-fluid type1">
<div>
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<h2 class="entry-title mod type2"><b>TITOLO_TESTO</b></h2>
<h4 class="entry-title mod type2"><i></i></h4>
<p>INTRODUZIONE AI DIPARTIMENTI
</p>
<div class="wpb_accordion wpb_content_element not-columninherit" data-collapsible="no" data-vc-disable-keydown="false"
data-active-tab="0">
Giorgio Baldassarre
81
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
<div class="wpb_wrapper wpb_accordion_wrapper ui-accordion uiwidget ui-helper-reset" role="tablist">
<div class="wpb_accordion_section group">
<h3 class="wpb_accordion_header ui-accordion-header ui-statedefault ui-accordion-icons ui-corner-all" role="tab" id="uiid-1" aria-controls="ui-id-2" aria-selected="false"
aria-expanded="true" tabindex="0">
<span class="ui-accordion-header-icon ui-icon ui-icontriangle-1-e"></span>
<a href="#build-your-own-layouts-with-visualcomposer">DIPARTIMENTO 1</a></h3>
<div class="wpb_accordion_content ui-accordion-content
vc_clearfix ui-helper-reset ui-widget-content ui-cornerbottom" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel"
aria-hidden="true" style="display: none;">
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<div class="contenitore_tabs accordion-ct">
<a href="javascript:void(0);" title="Commissione paritetica"
class="opening active">
<h2 class="titleCDL accordion-h2">SOTTOPARAGRAFO_1</h2></a>
<div class="section-author-meta theme_hook sixteen columns
alpha omega meta-table accordion-div expanded" style="display:
block;">
<div class="row 6u-one-column">
<div class="6u-one-column"></div>
</div></div></div></div></div></div></div></div></div></div></
div></div></div></div></div>
Listato 4.2 – Codice atto alla visualizzazione della struttura tab con doppio accordion
Tab Responsive
Se la sottosezione viene aperta da smartphone, i tab si compattano in un menù a tendina. Il codice
per ottenere ciò è presente nel Listato 4.3. I div con id=tab si trasformano in un menù di tipo
select.
<select id="tabsResponsive" name="tabsResponsive">
<option value="tab1">Ateneo</option>
<option value="tab2">Dipartimenti</option>
<option value="tab3">Rilevazione opinioni
docenti/studenti</option>
</select>
Listato 4.3 – Codice relativo ai tab in versione smartphone
82
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
4.4 Risultato grafico
4.4.1 Versione desktop
Conclusa l’analisi della progettazione e dell’implementazione della sezione in esame, mostriamo,
in questa versione, i risultati. Nella Figura 4.5 è riportata la pagina principale della sezione in versione
desktop. I button, come si nota, sono coerenti con lo stile del template e costituiscono un accesso
semplice ed intuitivo alle sei sottosezioni, in precedenza citate.
Figura 4.5 – Pagina principale della sezione “Presidio di Qualità”
Giorgio Baldassarre
83
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
In Figura 4.6, invece, è mostrata la sottosezione “Sistema di Assicurazione della Qualità e sistema
AVA” in versione desktop. La quantità di informazioni viene bilanciata dalla semplicità dell’interfaccia.
Le immagini del menù di livello 3 permettono una navigazione godibile fra le sottosezioni, mentre
i tab e gli accordion permettono l’accesso semplificato e, soprattutto, mirato alle informazioni.
Figura 4.6 – Sottosez. “Sistema di Assicurazione della Qualità e sistema AVA” in versione desktop
84
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
4.4.2 Versione smartphone
Nella Figura 4.7 viene mostrata la sezione “Presidio di Qualità” e la sottosezione “Sistema di
Assicurazione della Qualità e sistema AVA” in versione smartphone.
Figura 4.7 – Sezione “Presidio di Qualità” e sottosezione “Sistema di Assicurazione della Qualità e
sistema AVA” in versione smartphone
Giorgio Baldassarre
85
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
86
Giorgio Baldassarre
Capitolo 5
Interfacciamento con sistemi esterni
In questo capitolo analizzeremo i sistemi esterni coi quali il nuovo sito web di Ateneo si interfaccia. Un
sistema esterno è una soluzione molto efficiente per parallelizzare le attività. Il risultato di una corretta
cooperazione fra sistemi diversi è un sistema unico, integrato e complesso, nel quale le funzionalità sono
distribuite fra i sistemi presenti.
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
5.1 Cos’è un sistema esterno
Un sistema esterno è un sistema indipendente dal sistema informativo dell’Ateneo e può fornire
dei servizi atti allo svolgimento di determinati task. Interfacciarsi con un sistema esterno significa
usufruire dei servizi sopra citati. Per quanto riguarda il sito web di Ateneo, al momento, i sistemi esterni
coi quali è necessario interfacciarsi sono:


GOMP, il cui provider è Be Smart;
Titulus, il cui provider è il Cineca.
GOMP fornisce servizi tramite i suoi Web Service (in seguito WS), i quali sono stati progettati
proprio per facilitare la cooperazione fra sistemi differenti. L’interfaccia fra il nostro sistema ed un WS
si chiama WSDL (Web Service Description Language), il quale si basa sulla costruzione di un
documento in formato XML contenente informazioni sul WS stesso. Tale documento è di importanza
chiave; infatti, in esso sono riportate le firme (nome e parametri di input) e l’output dei metodi.
L’accesso ad un documento WSDL può essere pubblico o privato (è richiesta l’autenticazione), ma, in
ogni caso, l’IP dal quale ci si connette deve essere abilitato dal provider. Nel Listato 5.1 viene mostrato
l’elemento GetCds (Get Corso di studio) contenuto nel WSDL dei WS di GOMP; l'elemento
comprende un parametro uid ed un parametro lingua.
<s:element name="GetCds">
<s:complexType>
<s:sequence>
<s:element minOccurs="0" maxOccurs="1" name="uid"
type="s:string" />
<s:element minOccurs="0" maxOccurs="1" name="lingua"
type="s:string" />
</s:sequence>
</s:complexType>
</s:element>
Listato 5.1 – Elemento GetCds del WSDL dei WS di GOMP
Titulus, invece, è un sistema di gestione di protocolli. Gran parte del lavoro di Titulus viene
effettuato in back-end rispetto al sito di Ateneo; su quest’ultimo saranno visibili soltanto le
informazioni relative alla gestione dell’albo online.
88
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
5.2 Interfacciamento con il sistema GOMP
Il sistema GOMP è perfettamente integrato con il nuovo sito web di Ateneo. Tramite i Web Service
di GOMP abbiamo avuto accesso ad informazioni dinamiche, con le quali abbiamo implementato la
sezione “Didattica”. Nel seguito di questa sezione analizzeremo la progettazione e l’implementazione
di tale interfacciamento.
5.2.1 Analisi dei requisiti
La sezione “Didattica” è una delle aree più dinamiche di un sito di Ateneo. Essa, infatti, contiene le
informazioni sui corsi dell’Ateneo, i quali, ogni anno, potrebbero subire delle modifiche. Inoltre, è la
prima sezione visitata dagli studenti delle scuole superiori; per questo motivo, essa dovrà essere
quanto più intuitiva e semplice possibile. Nella Figura 5.1 viene illustrata la sezione “Didattica”
nell’attuale portale di Ateneo. I corsi sono ben visibili e distribuiti per dipartimento; la struttura ad
accordion è stata riportata nel nuovo sito di Ateneo, in quanto molto chiara e intuitiva.
Figura 5.1 - Sezione “Didattica” dell’attuale portale di Ateneo
Giorgio Baldassarre
89
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
5.2.2 Progettazione
Come detto in precedenza, l’aspetto chiave di questa sezione è la semplicità. Nella Figura 5.2 viene
visualizzato il mockup relativo alla sezione in esame. Per garantire una navigazione semplice, si è scelto
di effettuare una suddivisione in lauree triennali e lauree magistrali. I collegamenti sono stati
implementati con un’interfaccia a tile; grazie alle immagini contenute nei tile, la fruizione dei contenuti
sarà piacevole ed intuitiva.
Figura 5.2 – Mockup relativo alle sezione “Didattica” del nuovo sito web di Ateneo
90
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Nella Figura 5.3, invece, viene visualizzato il mockup relativo alla sottosezione “Lauree Triennali”.
Per ottenere l’accesso rapido a qualunque corso, è stato necessario conservare la struttura ad accordion
con il filtro per dipartimento, in modo tale che anche un nuovo utente (per esempio, uno studente delle
scuole superiori) riesca a raggiungere i corsi che lo interessano nel modo più semplice possibile. Grazie
al doppio accordion, infatti, l’utente non sarà costretto a visualizzare i corsi che non gli interessano,
poiché saranno “nascosti” all’interno degli accordion chiusi.
Figura 5.3 – Mockup relativo alla sottosezione “Lauree Triennali”
Giorgio Baldassarre
91
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
5.2.3 Implementazione
Poiché le informazioni dei corsi vengono fornite da GOMP, tramite i Web Service (in seguito, WS),
e possono subire variazioni ogni anno, la sezione è dinamica. Dunque, i tipi di codice utilizzati sono:
 codice PHP, per richiamare le informazioni dal sistema esterno;
 codice HTML-CSS, per curare la grafica;
 codice JavaScript (in seguito, JS), adatto alla struttura HTML utilizzata.
Il codice JS è comune alle strutture HTML utilizzate nel sito, perciò focalizzeremo l’attenzione sul
codice PHP specifico della sezione; esso richiama le informazioni utili utilizzando i metodi dei WS.
Funzioni PHP
Le funzioni utilizzate in questa sezione sono sette; esse includono la chiamata ai WS di GOMP ed
eseguono il salvataggio delle informazioni nella memoria cache del server. Il funzionamento della
memoria cache è tanto semplice quanto efficace. Quando un utente accede alla sezione “Didattica”, i
WS di GOMP scaricano le informazioni relative a tutti i corsi di studio attivi (una quantità elevata di
dati); successivamente, il sistema visualizzerà all’utente solo il corso che suscita il suo interesse. In
assenza di memoria cache, il sistema esterno sarebbe costretto a riscaricare i dati di tutti i corsi di
studio ogni volta che un utente accede alla sezione presa in esame; operazione costosa in termini di
tempo e risorse. Questa elevata quantità di dati viene salvata nella memoria cache con scadenza
giornaliera: la cache si svuoterà in automatico dopo 24 ore.
Noto il funzionamento del sistema cache dei WS, passiamo all’analisi della struttura delle funzioni.
Le funzioni PHP utilizzate per prelevare dati dal sistema GOMP sono le seguenti:





92
GetCds($uid); questa funzione riceve in ingresso un uid (il quale caratterizza
univocamente un corso di studio) e restituisce il corso di studio corrispondente.
GetClassi($uid, $indirizzo); questa funzione riceve un uid e un curriculum
(indirizzo) per restituire le classi di laurea corrispondenti.
GetInsegnamento($cds, $indirizzo, $ut, $uid); questa funzione riceve
un corso di studio, un curriculum, un ut e un uid per restituire un singolo insegnamento.
GetCurricula($cds); questa funzione riceve un corso di studio e restituisce i
curricula corrispondenti.
GetTestiErogata ($cdl, $cf, $cod, $componente); questa funzione
riceve un corso di laurea, un codice cf, un codice cod, una parola chiave componente
per restituire i testi relativi ad un insegnamento.
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …


GetTestiCds($cds); questa funzione riceve in ingresso il corso di studio e restituisce
i testi “obiettivi formativi specifici” e “ambiti occupazionali”.
GetInsegnamenti ($cds, $indirizzo, $erpr); questa funzione riceve un
corso di studio, un curriculum (indirizzo) e una parola chiave (erpr) per restituire i
corrispettivi insegnamenti di queste variabili.
Poiché le strutture di queste funzioni sono molto simili, ne studieremo solo due in dettaglio, ovvero
GetCds($uid) e GetCurricula($cds).
Funzione GetCds($uid)
Il codice della funzione è riportato nel Listato 5.2. In rosso viene evidenziata la creazione della
variabile client atta alla connessione coi Web Service di GOMP; le credenziali di accesso vengono
passate in un array. In verde, invece, sono state evidenziate le funzioni di caching. Prima di effettuare
la chiamata ai WS, viene utilizzata la funzione phpFastCache(), per verificare che il corso di studio
non sia già presente nella cache. Se il corso di studio non è in cache, siamo nel caso null==$object;
i dati dovranno essere prelevati dai WS tramite le funzioni evidenziate in blu e, successivamente, salvati
nella cache tramite la funzione $cache->set, che riceve in ingresso un uid concatenato con il
termine “Cds”, l’oggetto da salvare e il tempo di scadenza della cache (in secondi). Questo sistema di
controllo cache è utilizzato allo stesso modo nelle altre sei funzioni.
Function getCds($uid) {
$client = new SoapClient(
‘http://unircwebservices.gomp.it/GompCast/MobileWebService_1.asmx’
, array ( ‘features’ => SOAP_SINGLE_ELEMENT_ARRAYS,
‘soap_version’ => SOAP_1_2,
‘encoding’ => ‘ISO-8859-1’,
‘login’ => ‘****’,
‘password’ => ****’
)
);
$cache = phpFastCache();
$object = $cache->get($uid.”Cds”);
if ( null == $object ) {
$response = $client->GetErogata(array(‘uid’ => $uid));
$object = $response->GetErogataResult;
$cache->set($uid.”Cds”, $object, 60*60*24);
}
return ($object);
}
Listato 5.2 – Codice relativo alla funzione getCds($uid)
Giorgio Baldassarre
93
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Funzione GetCurricula($cds)
Il codice della funzione è riportato nel Listato 5.3. Come in precedenza, in rosso viene evidenziata
la creazione della variabile client atta alla connessione ai WS, in verde vengono evidenziate le
funzioni di caching e in blu le funzioni atte a prelevare i dati dal sistema esterno.
In questo caso, si nota una sintassi del codice leggermente più complessa; infatti, per ottenere i
curricula corrispondenti al corso di studio dato in ingresso, bisogna effettuare delle chiamate a diverse
funzioni (GetErogata, GetErogataResult, Curricula, MobileCurriculum). La
struttura della funzione rimane, tuttavia, la medesima.
function getCurricula($cds) {
$client = new SoapClient(
'http://unircwebservices.gomp.it/GompCast/MobileWebService_1.asmx',
array ( 'features' => SOAP_SINGLE_ELEMENT_ARRAYS,
'soap_version' => SOAP_1_2,
'encoding' => 'ISO-8859-1',
'login' => '****',
'password' => '****’
)
);
$cache = phpFastCache();
$arrayCurricula = $cache->get($cds . "Curricula");
if($arrayCurricula==null) {
$response = $client->GetErogata(array('uid' => $cds));
$curricula=$response->GetErogataResult->Curricula>MobileCurriculum;
$arrayCurricula = array();
foreach ($curricula as $key => $value)
$arrayCurricula[$value->UID] = $value->Denominazione;
$cache->set( $cds."Curricula", $arrayCurricula, 60*60*24);
}
return $arrayCurricula;
}
Listato 5.3 – Codice relativo alla funzione getCurricula($cds)
94
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Modello PHP relativo alla pagina del singolo insegnamento
Avendo analizzato la struttura delle funzioni utilizzate, vediamo, adesso, come esse vengono
integrate nelle pagine del portale di Ateneo, tramite i modelli PHP. Sebbene si tratti di contenuti
provenienti da un sistema esterno, i modelli PHP integranti queste funzioni sono identici ai modelli
delle altre sezioni; per questo motivo, vedremo in dettaglio solo il modello relativo alla visualizzazione
di un singolo insegnamento.
Richiamo delle variabili
All’interno di questo modello PHP, verranno richiamate alcune delle funzioni precedentemente
viste, le quali ricevono in ingresso delle variabili; queste sono concatenate nei link della sezione
“Didattica” in modo che le scelte dell’utente causino il passaggio delle variabili alla pagina successiva.
Quando l’utente clicca sul nome di un corso di laurea, viene creata una variabile uid ,che viene
successivamente riempita con l’uid del corso di laurea cliccato; la pagina alla quale l’utente sta
accendendo conterrà proprio il corso di laurea richiesto. In seguito, quando l’utente cliccherà su un
singolo insegnamento, verranno create e riempite le restanti variabili (cdl, curr, ut, cod). Il
codice relativo al richiamo delle variabili è riportato nel Listato 5.4. Il richiamo è stato implementato
tramite la struttura $_GET[‘nomevariabile’]. Avendo richiamato correttamente tutte le
variabili utili, viene utilizzata la funzione getInsegnamento($cdl, $curr, $ut, $uid) per
prelevare tutte le informazioni richieste sul singolo insegnamento e, subito dopo, la funzione
printInsegnamento ($insegnamento, 0) per visualizzare le informazioni iniziali relative
all’insegnamento stesso.
global $wpdb;
$cdl = $_GET['cdl'];
$curr = $_GET['curr'];
$ut = $_GET['ut'];
$cod = $_GET['cod'];
$uid = $_GET['uid'];
$insegnamento = getInsegnamento($cdl, $curr, $ut, $uid);
printInsegnamento($insegnamento, 0);
Listato 5.4 – Codice relativo al richiamo delle variabili
Giorgio Baldassarre
95
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Visualizzazione dei moduli dell’insegnamento
Focalizziamo l’attenzione sul codice atto alla visualizzazione dei moduli dell’insegnamento,
riportato nel Listato 5.5. Data l’alta ripetitività del codice, riporteremo solo le stringhe principali.
Ottenuto l’oggetto $insegnamento, ricaviamo i moduli con la struttura
$insegnamento['moduli']. Subito dopo, effetuiamo un controllo sul numero di moduli
dell’insegnamento; se il conteggio è superiore a zero, preleveremo le informazioni sui moduli tramite
la funzione getInsegnamento($cdl, $curr, $ut, $valueI). A differenza del caso
precedente, l’ultima variabile in ingresso della funzione è valueI (prima, invece, era $uid); perciò,
la funzione restituisce un oggetto di tipo modulo anziché un insegnamento. Grazie alla struttura
foreach, è possibile eseguire queste operazioni per ogni modulo presente all’interno
dell’insegnamento richiesto.
if (count($insegnamento['moduli']) > 0) {
foreach ($insegnamento['moduli'] as $valueI) {
$modulo = getInsegnamento($cdl, $curr, $ut, $valueI);
$componente = $modulo['denominazione'];
printInsegnamento($modulo, 1);
Listato 5.5 – Codice relativo alla visualizzazione dei moduli dell’insegnamento
Visualizzazione dei canali dell’insegnamento e dei docenti
Tramite la struttura $modulo[‘canali’] otteniamo i canali dell’insegnamento; per poter
visualizzare le informazioni su di essi, è necessario dapprima effettuare una query sul database
Wordpress (evidenziata in rosso nel Listato 5.5). Come si nota, alcune delle variabili richiamate in
precedenze vanno in ingresso alla query. Ricavato l’id dell’insegnamento, dopo averlo salvato nella
variabile insId, si potrà procedere alla visualizzazione dei canali, la quale è stata gestita con le
medesime strutture atte alla visualizzazione dei moduli. Per quanto riguarda la visualizzazione dei
docenti, è stata utilizzata la struttura foreach, già vista in precedenza, con l’array
valueI[‘docenti’].
$multiCh = 0;
if (count($modulo['canali']) == 1)
echo "<br />
<h2>Canale Unico</h2>";
elseif (count($modulo['canali']) > 1)
$multiCh = 1;
$query = $wpdb->prepare("SELECT ins.id FROM
wpunirc_corso_di_laurea AS cdl, wpunirc_indirizzo_cdl AS
96
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
ind,wpunirc_insegnamento_rel_indirizzo AS iri, wpunirc_insegnamento
AS ins "."WHERE cdl.id = ind.corso_di_laurea "
."AND ind.id = iri.indirizzo "
."AND iri.id = ins.id "
."AND cdl.guid = %s "
."AND ind.guid = %s "
."AND ins.guid = %s",$cdl ,$curr,$modulo['uid']);
$result = $wpdb->get_results($query);
$row = $result[0];
$insId = $row->id;
Listato 5.6 – Codice relativo al salvataggio dell’id dell’insegnamento
Visualizzazione delle informazioni testuali
Nell’ultima parte del modello vengono visualizzate le informazioni relative al materiale didattico,
al ricevimento, agli avvisi e all’orario delle lezioni. A tal fine è stata utilizzata una struttura a tab. Il
codice è riportato nel Listato 5.7. In blu viene evidenziato il codice dei tab, in rosso il codice del menù
responsive (il quale si attiverà solo su smartphone) e in verde l’inclusione del file
insegnamento_info.php. Il file PHP incluso riempirà i tab con le informazioni testuali.
<ul class="tabs">
<li class="Materiale_didattico" >
<a href="#Materiale_didattico">Materiale didattico</a>
</li>
<li class="Ricevimento">
<a href="#Ricevimento">Ricevimento</a></li>
<li class="Avvisi">
<a href="#Avvisi">Avvisi</a></li>
<li class="Orario_lezioni">
<a href="#Orario_lezioni">Orario lezioni</a> </li>
</ul>
<select id="tabsResponsive" name="tabsResponsive">
<option value="Materiale didattico">Materiale didattico</option>
<option value="Ricevimento">Ricevimento</option>
<option value="Avvisi">Avvisi</option>
<option value="Orario lezioni">Orario lezioni</option>
</select>';
include("insegnamento_info.php");
Listato 5.7 – Codice relativo alla visualizzazione delle informazioni testuali
Giorgio Baldassarre
97
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
5.2.4 Risultato Grafico
Conclusa l’analisi della progettazione e dell’implementazione della sezione in esame, mostriamo
i risultati. Nella Figura 5.4 è riportata la pagina principale della sezione “Didattica”; la struttura ricalca
quella della home page, conservando la disposizione a tile. Nella Figura 5.5, invece, è riportata la pagina
relativa alle lauree triennali; per questa sottosezione sono stati utilizzati gli accordion.
Figura 5.4 – Pagina relativa alla sezione “Didattica”
Figura 5.5 – Pagina relativa alla sottosezione “Lauree Triennali”
98
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Nella Figura 5.6, viene mostrata la sottosezione “Insegnamento”. La struttura è tabellare per le
informazioni base e per la visualizzazione dei canali di insegnamento; per le informazioni testuali,
invece, la struttura è a tab.
Figura 5.6 – Pagina relativa alla sottosezione “Insegnamento”
Giorgio Baldassarre
99
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
5.3 Interfacciamento con il sistema Titulus
Il sistema Titulus viene utilizzato dall’Ateneo per la gestione del protocollo; per tale ragione la sua
visibilità all’interno del sito web di Ateneo è molto ridotta. Infatti, esso viene utilizzato soltanto nella
sezione “Albo Pretorio Online”; perciò focalizzeremo l’attenzione su questa sezione.
5.3.1 Analisi dei requisiti
La sezione “Albo Pretorio Online”, similmente alla sezione “Presidio di Qualità”, è puramente
testuale. Inoltre, presenta del contenuto dinamico prelevato, in formato XML, dal sistema Titulus.
5.3.2 Progettazione
Tramite i mockup, mostriamo, ora, la progettazione della sezione in esame. In Figura 5.7 viene
mostrato il mockup della pagina principale della sezione “Albo Pretorio Online”. La struttura è molto
semplice; l’introduzione testuale è statica, mentre le pubblicazioni sono dinamiche e vengono fornite
dal sistema esterno. Il footer non è stato riportato in figura, ma è presente.
Figura 5.7 – Mockup relativo alla sezione “Albo Pretorio Online”
100
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
5.3.3 Implementazione
La struttura della sezione “Albo Pretorio Online” è molto semplice; infatti, non è stato necessario
implementare delle funzioni PHP specifiche, poiché i dati del sistema Titulus sono stati prelevati da un
file XML tramite delle funzioni PHP preesistenti. Nel Listato 5.7 viene riportato il codice atto alla
visualizzazione delle pubblicazioni. In rosso viene evidenziato l’utilizzo della funzione
simplexml_load_string (file_get_contents(“FILE_URL”)) per trasformare il file
XML, la cui posizione è indicata nell’URL in ingresso, in un oggetto PHP; l’operazione di trasformazione
si chiama parsing. Ottenuto l’oggetto PHP, è possibile prelevare le informazioni utili.
Tramite le strutture $xml[‘nome_campo’] si può prelevare l’attributo di un elemento XML,
mentre $xml->nome_campo viene utilizzato per prelevare il figlio di un elemento XML. Il codice
che si sta utilizzando è scritto in PHP; siccome in uscita deve restituire un file HTML, è necessario
utilizzare l’istruzione echo, la quale consente, appunto, la scrittura di testo su file. In verde viene
analizzato il codice atto all’apertura e alla chiusura del tag HTML table, il quale tag permetterà la
visualizzazione della tabella contenente le pubblicazioni. Tramite le struttura formata da due
foreach, evidenziata in blu scuro, è possibile effettuare un controllo su tutti i file di testo presenti in
ogni registrazione e, di conseguenza, visualizzare dinamicamente le pubblicazioni fornite dal sistema
Titulus. La pubblicazione è resa possibile tramite l’utilizzo di HTML misto PHP negli URL, i quali sono
evidenziati in viola.
$xml = simplexml_load_string(file_get_contents("https://titulusunirc.pp.cineca.it/albo/viewer?view=xml"));
$ora = $xml['ora'];
$data = $xml['data'];
echo "<div class=\"content\">";
echo "<h2>Pubblicazione del $data $ora</h2>";
echo "<table class=\"table\" summary=\"Registrazioni\">
<tr>
<th id=\"header1\" class=\"th_tab_5\"><div style=\"font-size:
0.9em; text-align: center\">Numero</div></th>
<th id=\"header2\" class=\"th_tab_5\"><div style=\"font-size:
0.9em; text-align: center\">Data registrazione</div></th>
<th id=\"header3\" class=\"th_tab_30\"><div style=\"font-size:
0.9em; text-align: center\">Richiedente</div></th>
<th id=\"header4\" class=\"th_tab_30\"><div style=\"font-size:
0.9em; text-align: center\">Oggetto</div></td>
<th id=\"header5\" class=\"th_tab_5\"><div style=\"font-size:
0.9em; text-align: center\">Inizio pubblicazione</div></th>
<th id=\"header6\" class=\"th_tab_5\"><div style=\"font-size:
0.9em; text-align: center\">Fine pubblicazione</div></th>
</tr>";
Giorgio Baldassarre
101
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
foreach($xml->registrazione as $registrazione) {
foreach($registrazione->lista_file as $file) {
$url =
"https://titulusunirc.pp.cineca.it/albo/viewer?view=".
$file->file['link'];
$lista_allegati ="";
if (count($file->file) > 1) {
$lista_allegati = "<ul>";
foreach($file->file as $allegati) {
$lista_allegati = $lista_allegati."<li><a
class=\"small_font\" href=\"https://titulusunirc.pp.cineca.it/albo/viewer?view=".$allegati['link']."\">".
$allegati['descr']."</a></li>";}
$lista_allegati=$lista_allegati."</ul>";}}
echo "<tr>";
echo "<td headers=\"header1\" align=\"center\">$registrazione>numero</td>";
echo "<td headers=\"header2\" align=\"center\">
$registrazione->data_registrazione</td>";
echo "<td headers=\"header3\">
$registrazione->richiedente</td>";
echo "<td headers=\"header4\"><a href=\"$url\">
$registrazione>oggetto</a> $lista_allegati</td>";
echo "<td headers=\"header5\"
align=\"center\">".
$registrazione->pubblicazione['dal']."</td>";
echo "<td headers=\"header6\"
align=\"center\">".
$registrazione->pubblicazione['al']."</td>";
echo "</tr>";}
echo "</table>";
echo "</div>";
Listato 5.8 – Codice relativo alla gestione dell’albo pretorio
5.3.4 Risultato Grafico
Conclusa l’analisi della progettazione e dell’implementazione della sezione in esame, mostriamo
i risultati. Nella Figura 5.8 viene riportata la pagina principale della sezione “Albo Pretorio Online”. La
struttura è totalmente testuale per l’introduzione, mentre è tabellare per la visualizzazione delle
pubblicazioni.
102
Giorgio Baldassarre
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
Figura 5.8 – Pagina principale della sezione “Albo Pretorio Online”
Giorgio Baldassarre
103
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
104
Giorgio Baldassarre
Capitolo 6
Conclusioni e uno sguardo al futuro
Eccoci alla conclusione della nostra “avventura” attraverso lo studio della User Experience
applicata al nuovo sito di Ateneo. Siamo partiti dal concetto di User Experience Design e abbiamo
affrontato i pro e i contro di questo nuovo punto di vista. Poiché il nostro attuale sito di Ateneo ha
causato non pochi problemi agli utenti e presenta una struttura statica e ormai datata, si è deciso di
riprogettare l’intero portale, partendo da un’analisi SWOT di quello attuale per conservare gli aspetti
positivi ed eliminare quelli negativi. Tramite i mezzi forniti dalla User Experience (elicitazione,
questionari, focus group, etc) abbiamo progettato un sito di Ateneo semplice, intuitivo e, soprattutto,
a misura di utente. Inoltre, la realtà odierna non si ferma mai, è in continua evoluzione; la risposta a
questa realtà è un’architettura dell’informazione quanto più dinamica e flessibile possibile. Abbiamo
raggiunto il nostro obiettivo utilizzando il CMS WordPress, il quale, grazie alla sua struttura pluginoriented e alla sua semplicità (lo si apprende in pochi giorni), ci ha permesso di creare numerose pagine
e di implementare nuove funzioni in pochissimo tempo. La flessibilità è fornita dai template, i quale
includono del codice HTML-CSS (per la grafica) e del codice PHP (per l’implementazione) già “pronti”
per essere utilizzati direttamente o modificati, per ottenere un risultato specifico. Con uno strumento
del genere, abbiamo guadagnato molto in termini di tempo ed efficienza, poiché un template
particolarmente valido, come quello da noi scelto, comprende del codice particolarmente raffinato.
Una delle maggiori novità del nuovo sito è la guida di stile, all’interno della quale abbiamo fissato delle
scelte grafiche, le quali saranno vincolanti per qualunque contenuto presente nel sito.
Detto ciò, c’è da dire che progettare e implementare un sito di Ateneo non è un compito facile;
bisogna scrivere/implementare molti contenuti ed essere molto precisi nel farlo. Nonostante le
dimensioni di questo progetto, esso è stato affidato a noi studenti, per la prima volta nella storia
dell’Ateneo. È stata una splendida occasione di crescita multidirezionale: abbiamo appreso molto sulla
programmazione web (HTML, CSS, PHP, MySQL) e abbiamo lavorato in team, aspetto molto
importante per il nostro futuro. Il nuovo sito di Ateneo è ormai pronto per il rilascio di testing: in ottobre
il sito sarà accessibile a tutti gli utenti connessi alla rete di Ateneo. Testing significa che il sito sarà attivo
in parallelo all’attuale in modo tale che gli utenti possano darci dei feedback, permettendoci di capire
cosa va migliorato. Questa è la forza della UX: l’utente è ormai “socio” del progetto e non verrà mai
abbandonato, poiché il sito si evolverà di continuo grazie al punto di vista dell’utente stesso. Applicate
le modifiche consigliate dai feedback degli utenti, il sito dovrebbe essere rilasciato nei mesi iniziali
dell’anno prossimo. Successivamente, i siti dipartimentali dovranno essere ridisegnati rispettando lo
stile del nuovo sito web di Ateneo; in questo modo, otterremo coerenza grafica anche nel passaggio
dal sito di Ateneo ad un sito dipartimentale.
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
106
Giorgio Baldassarre
Bibliografia
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
Come organizzare i contenuti per un sito web efficace.
http://www.slideshare.net/f.micali/come-organizzare-i-contenuti-per-un-sito-web-efficacemediabeta-consulneza-web-marketing ,2015.
CSS media queries. http://www.html.it/pag/19466/css-media-queries-le-basi/ , 2015.
Gli elementi dell’esperienza utente.
http://www.jjg.net/elements/translations/elements_it.pdf , 2015.
Guida PHP. http://www.html.it/guide/guida-php-di-base/ , 2015.
La sfida della trovabilità – Architettura dell’informazione.
http://www.slideshare.net/a.martellone/ia-la-sfida-della-trovabilit , 2015.
C. Bowles and J. Box. Undercover User Experience Design. Peachpit, 2010.
B. Buxton. Sketching User Experiences. Elsevier, 2007.
M. Crumlish and E. Malone. Designing Social Interfaces. O’Reilly, 2009.
B. Frain. Responsive Web Design with HTML5 and CSS3. Pactk Publishing, 2012.
T. Giannattasio. Mastering Photoshop for Web Design. Smashing Media, 2010.
B. LaGrone. HTML5 and CSS3 Reponsive Web Design Cookbook. Pactk Publishing, 2013.
M.C. Lavazza. Comunicare la User Experience. Apogeo, 2012.
M. Levin. Designing Multi-Device Experiences. O’Reilly, 2014.
A. Mendoza. Mobile User Experience. Elsevier, 2014.
W. Quesenbery and K. Brooks. Storytelling for User Experience. Rosenfeld Media, 2014.
Implementazione, basata sullo UXD, delle sezioni “Storie di successo” e “Presidio di Qualità” …
108
Giorgio Baldassarre
Ringraziamenti
Questa parte sarà ricca di nomi perché sono arrivato fin qui grazie a molte persone. Prima di tutto
ringrazio i miei genitori, che mi hanno lasciato libero di fare le mie scelte e, allo stesso tempo, mi hanno
cresciuto a pane, conoscenza e sport fin da piccolo, facendomi capire che i sacrifici portano sempre a grandi
risultati. Grazie a loro, ho avuto la possibilità di studiare fino ad iscrivermi all’università.
Ringrazio i miei nonni, che sono sempre pronti a condividere con me la loro infinità saggezza,
nonostante la loro età. Grazie a loro, ho appreso l’importanza dell’equilibrio.
Ringrazio i miei amici “del sabato sera”, che una (o più) volte a settimana mi offrono la possibilità di
mettere da parte tutto e respirare un po’ di aria fresca.
Ringrazio i miei compagni di allenamento Fra, Ciccio, Anto e Anna, perché ogni giorno mi insegnano
che un allenamento vero deve essere duro, ma una pausa bisogna sempre prenderla, altrimenti si rischia
di sbilanciarsi e non godere della vita. Grazie a loro, sono un ottimo atleta-conversatore.
Ringrazio i miei migliori amici Marco, Dario, Lorenzo, Anna e Mariarita, perché senza di loro niente
avrebbe senso. Mi hanno supportato e sopportato per anni, facendomi arrivare qui più sicuro di me e più
rilassato; con loro ho appreso il concetto di team per la prima volta in vita mia. Ognuno di loro ha
affrontato con me diverse esperienze di vita e mi ha sempre aiutato ad andare avanti con tutta la mia
forza, perché la chiave è trovare il proprio equilibrio e non fermarsi mai. Ho appreso tutto questo grazie a
loro. Continueremo sempre a sostenerci: questo fa di noi un vero team.
Ringrazio i miei amici ingegneri perché ogni giorno mi regalano un ambiente magnifico in cui crescere
psicologicamente e professionalmente. Fra battute, codice puro, tabelle, calcoli, e tanta allegria, hanno
reso il mio studio universitario molto più leggero. Grazie a tutti coloro che ho citato, non mi sono mai sentito
solo. Penso sia questo che mi dà tanta energia.
Ringrazio i membri del SIAT (Servizi Informatici di Ateneo), i quali collaborano col team dall’inizio di
questo progetto e sono sempre pronti a condividere la loro esperienza con noi.
Ringrazio la mia bella e coraggiosa ragazza Giulia, che mi è stata sempre vicina, anche nei periodi in
cui temevo di non farcela. Grazie a lei, ogni giorno ritrovo la tranquillità ed il sorriso.
Dulcis in fundo, ringrazio il professore Domenico Ursino, il quale, dopo il mio esame di Basi I, mi ha
dato la splendida possibilità di lavorare, ragionare, inventare e “vivere” una professionalità diversa dal
solito nel laboratorio di coworking Barbiana 2.o. Fra call for pizza, progetti e altre battute, il mio concetto
di “lavoro” ha, adesso, un’accezione diversa; è molto simile al concetto di divertimento. Grazie a Barbiana
2.0, ogni giorno, lavorando, apprendo qualcosa di nuovo, e lo faccio senza provare fatica. Con queste
parole, concludo la mia tesi. È stato un grande lavoro, ma molto molto appassionante.
Con un team del genere a sostenermi, non mi sarei aspettato nulla di diverso.