Università degli Studi Mediterranea di Reggio Calabria
Dipartimento di Ingegneria dell’Informazione, delle Infrastrutture e dell’Energia Sostenibile
Corso di Laurea in Ingegneria Informatica e dei sistemi per le Telecomunicazioni
Tesi Magistrale
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo e implementazione
delle pagine di base e di quelle relative all’Amministrazione Centrale e ai Laboratori di Ateneo
Relatori
Autore
Prof. Domenico Ursino
Demetrio Siclari
Prof. Maria Cristina Lavazza
Anno Accademico 2014-2015
Ai miei genitori, per tutti i sacrifici che hanno compiuto per
farmi raggiungere questo stupendo traguardo.
1. Sommario
Introduzione………………………………………………………………………………………………………………… 1
La User Experience ..................................................................................................... 5
Introduzione .................................................................................................................................................. 6
Lo User Experience Design........................................................................................................................... 10
Progettare per le persone............................................................................................................................. 12
Mobile User Experience ............................................................................................................................... 15
Mobile app .................................................................................................................................................... 18
Responsive Web Design ................................................................................................................................ 18
Analisi dell’attuale sito di Ateneo ............................................................................. 23
Introduzione ................................................................................................................................................ 24
Elementi strutturali ed architettura di un sito Web ....................................................................................... 24
Analisi dell’attuale portale dell’Università Meditarrenea ............................................................................... 27
Nodo N1. Ateneo .......................................................................................................................................... 28
Nodo N2. Didattica ....................................................................................................................................... 29
Nodo N.3 Studenti ........................................................................................................................................ 30
Nodo N.4 Ricerca .......................................................................................................................................... 30
Nodo N.5 International ................................................................................................................................. 31
La home page del sito ................................................................................................................................... 32
La home page di un sito dipartimentale......................................................................................................... 33
Un esempio di pagina interna del sito ............................................................................................................ 34
La pagina riservata relativa agli studenti........................................................................................................ 35
La pagina riservata relativa ai docenti ........................................................................................................... 37
La pagina riservata al Personale Tecnico-Amministrativo .............................................................................. 38
Le interviste con gli stakeholder ............................................................................... 45
Introduzione ................................................................................................................................................ 46
Individuazione degli stakeholder .................................................................................................................. 46
Interviste ai docenti ..................................................................................................................................... 47
I
Interviste al personale tecnico amministrativo ............................................................................................. 51
Interviste agli studenti ................................................................................................................................. 54
Interviste ai ragazzi delle superiori ............................................................................................................... 58
Elicitazione .............................................................................................................. 61
Introduzione ................................................................................................................................................ 62
Card sorting ................................................................................................................................................ 62
Free Listing ................................................................................................................................................. 63
Tree Testing ................................................................................................................................................ 63
Testing della struttura del portale di Ateneo ................................................................................................ 64
Progettazione dei wireframe ..................................................................................... 77
Introduzione ................................................................................................................................................ 78
I wireframe del nuovo portale di Ateneo ...................................................................................................... 79
Scelta del CMS del tema e dei plug-in ...................................................................... 99
Introduzione .............................................................................................................................................. 100
La scelta del CMS e del tema di base ......................................................................................................... 102
Scelta dei plugin ......................................................................................................................................... 103
Implementazione delle pagine di base ..................................................................... 107
Introduzione .............................................................................................................................................. 108
Modello UnircTemplate ............................................................................................................................. 109
Implementazione delle parti avanzate..................................................................... 117
Introduzione ............................................................................................................................................... 118
Gestione dei laboratori .............................................................................................................................. 120
Gestione dell’amministrazione centrale ...................................................................................................... 132
Confronto con gli altri portali universitari ................................................................136
Introduzione ............................................................................................................................................... 137
Conclusioni and sviluppi futuri …………………………………………………………..…………………………… 149
Ringraziamenti …..………………………………………………………………………………...…………………… 151
II
III
Lista di Figure
Figura 1.1 - Modello di Garrett "Gli elementi dell'esperienza utente" ........................................................................ 7
Figura 1.2 - Gli utenti veri e propri ............................................................................................................................ 8
Figura 1.3 - Cosa cercano gli utenti .......................................................................................................................... 9
Figura 1.4 - Coinvolgimento degli utenti .................................................................................................................. 9
Figura 1.5 - L’experience map descrive il viaggio di una persona per raggiungere il proprio obiettivo ..................... 10
Figura 1.6 Creazione dell"'esperienza ponte" su Amazon ....................................................................................... 12
Figura 1.7 - Mappa concettuale di Flickr ................................................................................................................ 14
Figura 1.8 - Varie risoluzioni dei dispositivi ............................................................................................................. 16
Figura 1.9 - Risoluzione degli smartphone ............................................................................................................. 16
Figura 1.10 - Mobile Equation ................................................................................................................................. 17
Figura 1.11 - Aree dello schermo durante l'uso con la mano destra .......................................................................... 17
Figura 1.12 - Multi-touch dei moderni dispositive ................................................................................................... 18
Figura 1.13 - Ridefinizione dei fallimenti per il mobile ............................................................................................. 19
Figura 1.14 - Ridurre i testi con pulsanti di approfondimento .................................................................................. 20
Figura 1.15 - Ridurre le immagini caricate .............................................................................................................. 20
Figura 1.16 - Responsive designer per smartphone e pc ......................................................................................... 21
Figura 1.17 - Possibile soluzione di layout per smartphone e tablet ......................................................................... 21
Figura 2.1 - Esempio di layout di un sito Web ......................................................................................................... 25
Figura 2.2 - Aree di maggiore attenzione secondo Google ..................................................................................... 26
Figura 2.3 - Struttura concava efficiente 6x2x2x12 ................................................................................................. 26
Figura 2.4 - Come viene visualizzata una pagina Web ............................................................................................ 27
Figura 2.5 - Sezioni principali del portale unirc.it .................................................................................................... 28
Figura 2.6 - Menù di navigazione principale delle macro sezioni del portale unirc.it ................................................ 28
Figura 2.7 - Nodo Ateneo....................................................................................................................................... 29
Figura 2.8 - Nodo Didattica ................................................................................................................................... 29
Figura 2.9 - Nodo Studenti .................................................................................................................................... 30
Figura 2.10 - Nodo ricerca.......................................................................................................................................31
Figura 2.11 - Nodo International .............................................................................................................................31
Figura 2.12 - Layout delle pagine di unirc.it ............................................................................................................ 32
Figura 2.13 - Analisi della home page ......................................................................................................................33
Figura 2.14 - Analisi della home page di un dipartimento ....................................................................................... 34
Figura 2.15- Analisi di una pagina interna di unirc.it ............................................................................................... 35
Figura 2.16 - Analisi della pagina riservata dello studente ...................................................................................... 36
Figura 2.17 - Analisi pagina riservata del docente .................................................................................................... 37
Figura 2.18 - Analisi della pagina riservata del PTA ................................................................................................ 38
Figura 2.19 - Statisiche di accesso al portale di Ateneo .......................................................................................... 39
Figura 2.20 - Analisi delle sorgenti di traffico ......................................................................................................... 41
IV
Figura 2.21 – Analisi dei flussi principali degli utenti sul portale .............................................................................. 41
Figura 2.22 - Analisi delle sessioni utente ............................................................................................................... 42
Figura 2.23 - Analisi dei dati in-page per la home page ........................................................................................... 42
Figura 2.24 - Analisi SWOT per il portale unirc.it .................................................................................................... 43
Figura 4.1 - Esempio di una sessione di Card Sorting .............................................................................................. 63
Figura 4.2 - L'albero dei contenuti delle sezioni principali ....................................................................................... 64
Figura 4.3 - L'albero dei contenuti previsto per il futuro studente ........................................................................... 65
Figura 4.4 - L'albero dei contenuti previsto per lo studente iscritto ......................................................................... 66
Figura 4.5 - L'albero dei contenuti previsto per lo studente internazionale ............................................................. 67
Figura 4.6 - L'albero dei contenuti per il laureando o laureato ................................................................................ 68
Figura 4.7 - L'albero dei contenuti previsto per l'impresa o per l'ente ...................................................................... 69
Figura 4.8 - L'albero dei contenuti previsto per il personale .................................................................................... 70
Figura 4.9 - L'albero dei contenuti delle sezioni principali rivisitato ........................................................................ 71
Figura 4.10 - La struttura informativa rivisitata della regione "Studiare alla Mediterranea" ..................................... 72
Figura 4.11 - La struttura informativa rivisitata relativa allo studente ..................................................................... 72
Figura 4.12 - La struttura informativa rivisitata relativa alla regione "Internazionalizzazione" ................................. 73
Figura 4.13 - La struttura informativa rivisitata relativa al laureato o laureato ......................................................... 73
Figura 4.14 - La struttura informativa rivisitata pensata per le imprese o gli enti esterni ......................................... 74
Figura 4.15 - La struttura informativa rivisitata relativa al docente ......................................................................... 74
Figura 4.16 - La struttura informativa rivisitata per il Personale Tecnico Amministrativo ........................................ 75
Figura 4.17 - La struttura informativa rivisitata per il dottorando o dottore di ricerca .............................................. 75
Figura 5.1 - Il raffinamento dei wireframe per arrivare ai mockup ........................................................................... 78
Figura 5.2 - Finestra start di Windows 8 ................................................................................................................. 79
Figura 5.3 - Definizione di un linguaggio visivo tramite la composizione dei tile ...................................................... 80
Figura 5.4 - Esempio di composizione di tile con più stili......................................................................................... 81
Figura 5.5 - Wireframe relativo alla home page ...................................................................................................... 82
Figura 5.6 – Wireframe della pagina relativa agli studenti ...................................................................................... 83
Figura 5.7 – Wireframe della pagina relativa ai docenti ........................................................................................... 84
Figura 5.8 – Wireframe della pagina relativa al Personale Tecnico Amministrativo ................................................. 85
Figura 5.9 – Wireframe della pagina relativo al laureando o laureato ...................................................................... 86
Figura 5.10 – Wireframe della pagina relativa alle imprese e agli enti...................................................................... 87
Figura 5.11 – Wireframe della pagina relativa allo studente internazionale ............................................................. 88
Figura 5.12 – Wireframe della pagina “Trasferimento Tecnologico” ....................................................................... 89
Figura 5.13 –Wireframe della pagina “Ricerca” ....................................................................................................... 90
Figura 5.14 -Wireframe relativo alla rubrica ............................................................................................................ 92
Figura 5.15 – Wireframe relativo alla pagina “Didattica” ......................................................................................... 93
Figura 5.16 – Wireframe relativo alla pagina dei corsi di laurea triennale ................................................................ 94
Figura 5.17 - Wireframe relativo alla pagina dei laboratori ...................................................................................... 95
Figura 5.18 – Wireframe relativo alle storie di successo ......................................................................................... 96
Figura 5.19 – Wireframe relativo ad una singola storia di successo. ........................................................................ 97
Figura 6.1 - Statistiche sull'uso dei CMS ............................................................................................................... 100
Figura 6.2 - Polytechinic Theme .......................................................................................................................... 103
Figura 6.3 - Contenuti inseribili tramite Visual Composer ..................................................................................... 104
V
Figura 6.4 - Responsive Menù espanso .................................................................................................................105
Figura 7.1 - Home page del nuovo sito di Ateneo................................................................................................... 111
Figura 7.2 – La pagina "Studiare alla Mediterranea" .............................................................................................. 112
Figura 7.3 – Esempio di pagina interna del portale ................................................................................................ 113
Figura 7.4 - Esempio di pagina interna del portale con il plug-in Add-contact attivo .............................................. 114
Figura 7.5 - Menu select option per accedere al menù da mobile ........................................................................... 115
Figura 8.1 - Modello E/R delle parti principali del database dell'attuale sito di Ateneo............................................ 119
Figura 8.2 - Pagina dei laboratori .......................................................................................................................... 121
Figura 8.3 - Pagina del singolo laboratorio ........................................................................................................... 124
Figura 8.4 - Pagina dell'amministrazione centrale ................................................................................................. 135
Figura 9.1 – La home page del portale dell'Università di Bologna .......................................................................... 138
Figura 9.2 - La home page del portale dell'Università di Padova ........................................................................... 139
Figura 9.3 - Visualizzazione delle pagine di Unito.it senza JavaScrip abilitati ....................................................... 140
Figura 9.4 – La home page del portale dell'Università di Torino ............................................................................. 141
Figura 9.5 – La home page del portale dell’ Università di Firenze .......................................................................... 142
Figura 9.6 - Home page del portale Unifi.it con JavaScript disattivati .................................................................... 143
Figura 9.7 - La home page del portale dell'Università di Siena .............................................................................. 144
Figura 9.8 – La home page deI portale dell'Università di Oxford ........................................................................... 146
Figura 9.9 – La home page del portale dell'Università di Stanford ......................................................................... 147
Figura 9.10 - Pagina “in breve” sul portale dell’Università di Stanford................................................................... 148
VI
List of Tables
Tabella 1.1 – I passi e gli strumenti per progettare una buona esperienza utente ...................................................... 8
Tabella 2.1 - Lingua dei visitatori del portale .......................................................................................................... 39
Tabella 2.2 - Dispositivo utilizzato dai visitatori...................................................................................................... 40
Tabella 2.3 - Browser utilizzati dai visitatori ........................................................................................................... 40
Tabella 3.1 - Principali stakeholder individuati ........................................................................................................ 47
VII
VIII
Lista di Listati
Listato 7.1 - Intestazione del file style.css relativo al tema Polytechnic .......................................................... 108
Listato 7.2 - Intestazione style.css del template figlio ................................................................................... 109
Listato 7.3 - Stringa per associare un file PHP ad un modello in Wordpress ........................................................... 110
Listato 7.4 - Modello di base di tutte le pagine del nuovo sito di Ateneo ............................................................... 110
Listato 8.1 - Esempio d'uso della variabile globale $wpdb per l'accesso al database ............................................. 118
Listato 8.2 - Codice JQuery che nasconde la form di ricerca ................................................................................. 122
Listato 8.3 - Codicei JQuery che permette la ricerca interattiva ............................................................................ 122
Listato 8.4 - Parte di codice che gestisce la risposta JSON della pagina relativa ai laboratori ................................ 122
Listato 8.5 - Elaborazione del JSON ..................................................................................................................... 123
Listato 8.6 - Rewrite degli URL in Wordpress ....................................................................................................... 123
Listato 8.7 - Metodo get_translate_db per la gestione dei campi multilingua .............................................. 125
Listato 8.8 - Metodo prepare_info_laboratorio() ................................................................................. 125
Listato 8.9 - Metodo prepare() per prelevare gli SSD associati al laboratorio .................................................. 125
Listato 8.10 - Metodo prepare() per le prelevare le informazioni di tutte le persone associate al laboratorio ... 126
Listato 8.11 - Metodo prepare() per prelevare i progetti associati ad un laboratorio ........................................ 126
Listato 8.12 - Metodo prepare() per prelevare le attrezzature di un laboratorio .............................................. 126
Listato 8.13 - Metodo prepare() per prelevare i termini di ricerca svolti da un laboratorio .................................127
Listato 8.14 - Metodo get_laboratorio_details() che elabora tutte le informazioni del singolo laboratorio
.................................................................................................................................................................................. 131
Listato 8.15 - Esempio di stampa delle informazioni del laboratorio nel modello Laboratori ............................ 131
Listato 8.16 - Parte del metodo get_immagine() che gestisce le immagini del laboratorio ............................. 132
Listato 8.17 - Trigger di creazione della tabella wp_struttura .......................................................................... 133
Listato 8.18 - Metodo di cifratura delle email ....................................................................................................... 134
IX
X
Introduzione
“I siti web delle Pubbliche Amministrazioni, in quanto emanazione e rappresentazione dell’Ente di riferimento
che ne ha la responsabilità, devono porsi, come obiettivo primario, quello di concorrere ad affermare il diritto dei
cittadini ad un'efficace comunicazione, offrendo all’utenza cui si rivolgono un canale permanente di dialogo con
l’istituzione.
I siti sono il mezzo primario di comunicazione, il più accessibile e meno oneroso, attraverso cui le Pubbliche
Amministrazioni devono: garantire un'informazione trasparente ed esauriente sul loro operato; promuovere
nuove relazioni con i cittadini, le imprese e le altre PA; pubblicizzare e consentire l'accesso ai propri servizi;
consolidare la propria immagine. Essi devono offrire all’utenza cui si rivolgono servizi, sia di tipo informativo che
transazionale, rispondenti a caratteristiche di qualità sinteticamente esprimibili in:
accertata utilità;
semplificazione dell’interazione tra amministrazione ed utenza;
trasparenza dell’azione amministrativa;
facile reperibilità e fruibilità dei contenuti;
costante aggiornamento.”
Il testo mostrato in precedenza, tratto dalle linee guida per i siti web delle PA, elaborato da un gruppo di lavoro
composto da DigitPA, dal Dipartimento per la funzione pubblica (PCM), dal Dipartimento per la digitalizzazione e
l’innovazione tecnologica (PCM) e da FormezPA, evidenzia in modo esemplare l’importanza strategica che un sito web
istituzionale ha per un ente pubblico (quale può essere un’università come la Mediterranea). Importanza strategica che
impone che un sito web istituzionale sia costantemente aggiornato, completo, accessibile da chiunque, con le
informazioni strutturate in modo tale che siano facilmente rintracciabili e fruibili da tutti. Senza dubbio, in questo
momento, il sito web istituzionale rappresenta la principale vetrina per un Ateneo.
Per quanto riguarda l’Università degli Studi Mediterranea, l’attuale sito web è stato realizzato intorno al 2010. Al
momento della sua presentazione ha avuto svariati riscontri positivi ma, con il passare del tempo, anche a causa di una
mancanza di manutenzione costante, si è via via degradato nei contenuti e nella strutturazione. Inoltre, non è riuscito a
mantenersi al passo con i tempi per quanto riguarda la tecnologia; ad esempio, il sito non è “responsive”, ovvero non
adegua la visualizzazione dei contenuti al tipo di dispositivo che si sta utilizzando.
Tutte le considerazioni di cui sopra hanno spinto la governance dell’Ateneo a puntare sulla realizzazione di un nuovo
sito web istituzionale che fosse pienamente conforme alle linee guida per i siti web delle PA, fosse in linea con i tempi
per quanto riguarda le attuali soluzioni tecniche e di design, e rappresentasse una vetrina per l’ente nonché un punto di
riferimento certo (soprattutto per gli stakeholder esterni – studenti delle scuole superiori, enti e imprese, studenti
internazionali) dove individuare in modo facile ed amichevole tutte le informazioni di interesse.
In questo scenario è apparso naturale individuare le best practices nazionali e internazionali relative alla realizzazione
di siti web di Ateneo e, più in generale, di sistemi informatici complessi. Al momento, una delle best practice a livello
internazionale in questo contesto (e che, anche se lentamente, sta diffondendosi pure in Italia) consiste nell’adozione
della tecnica dello User Experience design.
Con il termine “User Experience” (UX, in breve) si intende un approccio alla realizzazione di un prodotto (non
necessariamente software) che coinvolge un insieme di discipline applicate e che pone come suo fondamento il modo
con cui le persone si rapportano ad un sistema. Il focus principale della UX sta nel modo in cui l’individuo (posto al centro
dell’attenzione) reagisce all’utilizzo del sistema. In tale analisi vengono affrontati aspetti pratici, ergonomici, tecnologici,
ma anche cognitivi, psicologici, antropologici e sociali. La UX può essere applicata a qualsiasi ambito della vita di un
individuo. Il processo che essa innesca è iterativo, puntando ad un miglioramento continuo, tornando (se necessario) sui
proprio passi per intraprendere nuove strade, qualora questo sia l’indirizzo emerso dalle risposte degli utenti. La UX è un
Introduzione
processo dinamico, che necessariamente deve rimanere al passo con l’evoluzione tecnologica, e ha una natura poliedrica,
perché interviene nella sfera dell’esperienza individuale, dei sentimenti e delle emozioni.
La realizzazione del nuovo sito web istituzionale di Ateneo è stata condotta cercando di seguire al meglio tutti i
dettami della UX.
Innanzitutto è stata effettuata un’analisi del sito web istituzionale corrente, cercando di individuare i suoi punti di
forza (da riproporre nel nuovo sito) e quelli di debolezza (da non riportare, ovviamente, nel nuovo sito). L’analisi ha
riguardato non solo la strutturazione dei contenuti ma anche il numero e la tipologia di accessi alle varie pagine. In
parallelo, sono stati esaminati i siti web istituzionali di decine di atenei, sia nazionali che internazionali.
Successivamente, è stata condotta una campagna di interviste a tutti i potenziali stakeholder del sito (studenti delle
scuole superiori, studenti iscritti presso l’Ateneo, laureandi e laureati, dottorandi, docenti, esponenti del Personale
Tecnico Amministrativo) per cercare di capire quale fosse il loro punto di vista rispetto al sito corrente e cosa di
aspettassero dal nuovo sito.
In parallelo, sono state effettuate delle scelte sulla piattaforma software da utilizzare. E’ stato chiaro, fin da subito,
che sarebbe stato opportuno scegliere un Content Management System (CMS, in breve), dal momento che questo
strumento facilita notevolmente la costruzione e la gestione di siti Web. Tra i vari possibili CMS a disposizione, dopo
un’attenta analisi, la scelta è ricaduta su Wordpress. Una volta scelto il CMS, è stato individuato il tema e sono stati
selezionati alcuni plug-in di supporto per alcune delle operazioni che il nuovo sito avrebbe dovuto garantire.
Una volta scelto il tema, e una volta individuati, almeno in linea di massima, i principali contenuti del sito, si è deciso
di avviare un’attività di elicitazione, rispettando le best practices dello UX design, al fine di determinare la strutturazione
delle informazioni. A tal fine sono stati costruiti dei mock-up preliminari e, successivamente, sono state avviate delle
attività di free listing e di tree testing con l’obiettivo di individuare la struttura delle principali sezioni del sito. In questa
attività sono stati coinvolte decine di persone, appartenenti alle varie categorie di stakeholder del sito.
Terminata questa fase si è proceduto con l’implementazione del sito. In questa tesi ci siamo occupati principalmente
di alcuni aspetti di tale attività, ovvero la definizione delle principali pagine statiche nonché la realizzazione di alcune
sezioni dinamiche, quali quella relativa ai laboratori e quella concernente la struttura dell’Ateneo.
Ovviamente, l’implementazione di un progetto così complesso, come può essere un sito web istituzionale di un
Ateneo, è estremamente articolata e, chiaramente, non basta un’attività di tesi a portarla a compimento. A riprova di ciò,
attualmente, ci sono ben 9 persone che compongono il team che si occupa della costruzione di questo sito web e l’attività
è destinata a durare svariati mesi ancora. Con questa tesi, però, si sono poste le basi per poter rendere agevole il lavoro
degli altri e, soprattutto, l’integrazione delle aree costruite dai diversi implementatori.
La presente tesi è strutturata come di seguito specificato:
2
Nel primo capitolo verrà proposta una breve introduzione allo User Experience design, cercando di
individuare gli aspetti peculiari di questa filosofia di costruzione di prodotti e sistemi (non necessariamente
informatici).
Nel secondo capitolo verrà illustrata in dettaglio l’analisi dell’attuale sito istituzionale di Ateneo, sia per ciò
che concerne la sua struttura sia per ciò che riguarda la modalità di accesso ad esso.
Nel terzo capitolo verranno presentate le interviste agli stakeholder, effettuate per comprendere i punti di
forza e di debolezza dell’attuale sito istituzionale.
Le tecniche di elicitazione e l’applicazione delle stesse (in particolare, del free listing e del tree testing)
nell’ambito della progettazione del sito web da costruire rappresentano l’argomento del quarto capitolo.
Il quinto capitolo è, invece, dedicato alla progettazione dei mockup relativi alle principali pagine che
costituiscono il sito da realizzare.
Nel sesto capitolo verranno descritte le ragioni che hanno portato alla scelta di Wordpress come CMS di
riferimento; vengono, inoltre, illustrate la scelta del tema generale e quella dei plug-in di riferimento.
L’implementazione delle pagine statiche di base è l’argomento del settimo capitolo. In esso verranno
evidenziate le principali scelte che sono state effettuate nell’ambito della realizzazione delle componenti
statiche del sistema.
Nell’ottavo capitolo verrà, invece, illustrata l’implementazione di due importanti sezioni avanzate del sito
web istituzionale, ovvero quella relativa ai laboratori e quella concernente la strutturazione dell’Ateneo.
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Demetrio Siclari
Nel nono capitolo si procederà al confronto tra il portale (almeno parzialmente) realizzato ed altri siti web
istituzionali di Atenei, sia italiani che stranieri.
Infine, nel decimo e ultimo capitolo, verranno tratte le conclusioni e verranno delineati alcuni possibili
sviluppi futuri del lavoro oggetto della presente tesi.
3
Introduzione
4
Demetrio Siclari
La User Experience
Gli sviluppatori tendono a dimenticare che sono gli altri ad usare i loro software per la maggior parte del tempo. Un’interfaccia
efficace aiuta gli utenti a gestire il proprio business con il minimo sforzo e senza creare confusione. In questo capitolo si
cercherà di capire quali sono le principali esigenze e aspettative degli utenti e come progettare per le persone, al fine di
raggiungere la loro soddisfazione.
La User Experience
Introduzione
Sono molti i fattori che decretano il successo di un sito o di un’applicazione. Oggigiorno, però, l’aggressiva ed
intensiva competitività, che si è creata grazie al Web, fa sì che anche i cosiddetti “siti di eccellenza” non possano sedersi
sugli allori, ma debbano continuamente migliorarsi. La regola dei contenuti di qualità non sempre funziona e, a volte,
basta un click del nostro cliente/utente per abbandonarci e passare a un altro sito.
Alla base di un buon sito c’è una buona progettazione e, a sua volta, alla base di una buona progettazione c’è
sicuramente l’organizzazione dei contenuti.
Si possono sfruttare le migliori tecnologie a disposizione e le più accattivanti soluzioni grafiche per realizzare un sito
o un’applicazione. Tuttavia se non è chiara la struttura semantica dello stesso e come posizionare al meglio i contenuti
ed i servizi offerti, integrandoli con la giusta distribuzione grafica all’interno delle pagine, il software risulterà sempre
difficile da usare e navigare. All’aumentare dei contenuti e dei servizi offerti, il sito rischierà, anche di risultare dispersivo
e confusionario.
Usando una metafora, organizzare i contenuti di un sito o di un’applicazione è un po’ come progettare la disposizione
delle prese, degli attacchi dell’acqua e del telefono di un appartamento vuoto. In futuro saranno elementi poco evidenti,
ma influiranno in maniera decisiva sulla qualità degli spazi. Potremo, infatti, cambiare disposizione degli arredi, ma le
scelte saranno sempre influenzate dall’organizzazione prestabilita.
Usabilità di un sito
Col termine “usabilità” si intende il grado di facilità e soddisfazione con cui si compie l’interazione tra l’uomo e uno
strumento (interfaccia grafica, console, leve, etc.). A partire dalla seconda metà degli anni ’80, con l’espansione delle
tecnologie informatiche e la diffusione del personal computer, il termine “usabilità” viene applicato agli strumenti ICT.
Con la diffusione di Internet, a partire dagli anni ‘90, il concetto di usabilità si amplia ulteriormente e inizia ad essere
applicato per l’interazione utente – Web. In questo senso, sarebbe più corretto parlare di “Web usability”, per delimitarne
chiaramente l’ambito di applicazione.
L’usabilità dei siti Web rappresenta oggi un elemento determinante perché da essa dipende l’effettivo utilizzo e la
fruizione efficace del sito stesso da parte dell’utente. La Web usability è un aspetto importante della fase di progettazione
da considerare al fine di realizzare siti Web facili da usare, ‘amichevoli’ e, al tempo stesso, attraenti. L’usabilità può essere
intesa come elemento di valutazione indispensabile della funzionalità di un sito Web.
Jacob Nielsen, considerato il principale studioso dell’usabilità del Web, definisce l’usabilità "come la misura della
qualità dell’esperienza dell’utente nell’interazione con qualcosa, sia esso un sito Web o un’applicazione software
tradizionale o qualsiasi altro strumento con il quale l’utente può operare”. Secondo Nielsen, un prodotto è usabile
quando è:
Facile da apprendere; deve essere intuitivo per le persone che devono capire subito come funziona.
Semplice da memorizzare; anche chi usa saltuariamente il sistema deve essere in grado di integrarsi
velocemente con esso.
Capace di controllare; deve ridurre al minimo gli errori da parte degli utenti e deve essere, al tempo
stesso, in grado di permettere all’utente di auto correggersi per evitare di incorrere nello stesso
errore la volta successiva.
Soddisfacente; se il sistema è facile e logico all’utilizzo, l’utente tornerà volentieri. Nel Web la
soddisfazione finale dell’utente è inversamente proporzionale allo sforzo intellettivo che il sito o
l’applicazione richiedono.
L’organizzazione dei contenuti è la base anche dei sistemi di navigazione di un portale. Si può pensare di organizzare
i contenuti in base alla cronologia, alla struttura aziendale interna, al target di riferimento o all’autore. Esistono anche
degli schemi organizzativi esatti (alfabetici, cronologici) e degli schemi soggettivi (semantico, target) e misti. La maggior
parte dei siti attuali optano proprio per questi ultimi, riuscendo a fondere insieme più schemi (per esempio semantico +
cronologico); tuttavia, nel risultato, quello che conta è riuscire a trovare il giusto equilibrio fra esclusività e inclusività.
6
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
L’ideale nasce, infatti, da un buon compromesso tra ampiezza dei contenuti e profondità nella quale si intende
scendere (ovvero quanti click servono per raggiungere ciò che si cerca).
Possiamo pensare di scegliere un menu con dieci livelli e tre livelli sottostanti o un menù con tre sezioni e dieci
sottolivelli. Il risultato, nel primo caso, sarà 10x10x10 = 103 = 1000, mentre nel secondo 310, un numero nettamente più
grande.
L’utente, nei due esempi precedenti, si potrebbe trovare in due situazioni totalmente opposte. La prima ipotesi
comporta maggiore indecisione poiché si mostra all’utente un eccesso di scelte. Nel secondo caso l’utente rischia di non
trovare mai le informazioni perché “troppo nascoste”.
A monte di una ogni buona organizzazione dei contenuti occorre tenere conto anche del ruolo fondamentale degli
schemi prescelti. La regola fondamentale è sempre quella di cercare di rassicurare il navigatore su ciò che troverà,
evitandogli pericoli di smarrimento.
L’esperienza utente
Lo studio dell’esperienza utente su un prodotto tecnologico, secondo J.J. Garret, consente di migliorare il prodotto
stesso tenendo conto dei suoi reali utilizzatori, dei loro bisogni e delle loro difficoltà e conoscenze.
Il Web è stato originariamente concepito come uno spazio di informazione ipertestuale, ma lo sviluppo di tecnologie
di front-end e di back-end sempre più sofisticate ha favorito la sua adozione come interfaccia software remota. Il modello
messo a punto da Garrett si sviluppa secondo due piani che procedono in parallelo: il Web inteso, appunto, come
interfaccia software, e il Web inteso come sistema ipertestuale. In ciascuna delle cinque fasi previste dal modello si
stabiliscono, rispetto ai due piani, gli obiettivi da raggiungere e la struttura del prodotto; questi vengono raffinati via via
nello specifico. Il risultato finale è, per Garrett, la possibilità di creare un prodotto efficace, effettivamente usabile e,
quindi, capace di produrre un’esperienza positiva per l’utente. In Figura 1.1 viene il modello di Garrett in dettaglio.
Figura 1.1 - Modello di Garrett "Gli elementi dell'esperienza utente"
Un bravo Web designer è colui che soddisfa “l’occhio” curando e disegnando la parte grafica. Si occupa dell’aspetto e
della sensazione che esso trasmette. In realtà, la parte grafica è soltanto la punta di un iceberg. Sotto la superficie si
trovano le basi di un design di successo che prevede la centralizzazione attorno alle persone. Si tratta di un ciclo di
sviluppo fatto di esplorazione, continui aggiustamenti e messe a punto. Esso prende in considerazione:
Demetrio Siclari
7
La User Experience
I differenti tipi di utente; ogni individuo ha esigenze diverse in base anche alle sue capacità e alle situazioni
che lo portano ad utilizzare l’applicazione software (Figura 1.2).
Le esigenze degli utenti; ovvero ciò che cercano quando utilizzano il sistema (Figura 1.3).
Il coinvolgimento degli utenti; i risultati più efficaci si ottengono quando l’utente è coinvolto in ogni fase
della progettazione attraverso feedback diretti, test, osservazioni (Figura 1.4).
Figura 1.2 - Gli utenti veri e propri
Il risultato di questo processo è un’elevata usabilità, un aspetto grafico efficace ed efficiente, coinvolgente e facile da
usare ed imparare. Ci sono, per ogni fase del processo, vari strumenti e metodi da applicare per far sì che la probabilità di
successo del prodotto sia notevolmente aumentata. I passi e gli strumenti principali per progettare una buona esperienza
utente sono riportati in Tabella 1.1.
Passo
Visual design
Information design
Structure
Requirement
Strategy
Cosa fa
Strumenti
Cura la disposizione ed il formato Tavola dei colori, allineamento,
degli elementi grafici del prodotto.
formato dei testi, etc.
Progetta come presentare le Indici e gerarchie visive.
informazioni per facilitarne la
comprensione e la navigazione.
Disegna
la
struttura
della Architettuta delle informazioni,
disposizione nello spazio delle wireframe, progressive disclosure,
informazioni per facilitarne l’accesso etc.
e rendere i contenuti intuitivi.
Descrive il campo delle applicazioni, Personas, accessibilità, set di
le esigenze degli utenti e le specifiche funzionalità, ricerca etnografica, etc.
funzionali che il progetto deve
rispettare
Pianifica gli obiettivi da raggiungere Project space, project schedule,
e le strategie necessarie
briefing, etc.
Tabella 1.1 – I passi e gli strumenti per progettare una buona esperienza utente
.
8
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 1.3 - Cosa cercano gli utenti
Figura 1.4 - Coinvolgimento degli utenti
Il primo step da compiere per rappresentare l’esperienza utente è la realizzazione di una mappa mentale; questa non
è altro che la rappresentazione di come la conoscenza debba essere trasferita in modo chiaro per favorire la
memorizzazione dei concetti fondamentali.
Possiamo parlare di una vera e propria “experience map” che tiene conto della relazione fra un prodotto/brand ed un
individuo in un determinato periodo tramite speciali canali. Nelle experience map c’è sempre un protagonista, ovvero la
persona, ed una storia che coincide con il raggiungimento di un obiettivo (ad esempio acquistare un biglietto per partire
Demetrio Siclari
9
La User Experience
per l’America). La mappa ripercuote il percorso fisico, digitale ed emozionale che la persona compie per arrivare a
soddisfare il proprio bisogno (Figura 1.5).
Figura 1.5 - L’experience map descrive il viaggio di una persona per raggiungere il proprio obiettivo
L’experience map tende a rappresentare un preciso scenario che ha un inizio con le motivazioni che spingono la
persona ad agire, uno o più canali che indicano percorsi scelti dal protagonista per raggiungere l’obiettivo, e un epilogo
che è l’insieme di scelte e sentimenti compiute dalla persona durante il proprio viaggio.
Essa si pone come strumento strategico per comprendere e presentare le interazioni ed il tipo di esperienze che un
utente ha con un prodotto o servizio. Al centro di tutto c’è l’esperienza, intesa come l’insieme delle azioni, delle risposte,
delle difficoltà e delle relazioni che si instaurano fra prodotto e cliente. La mappa evidenzia anche tutti i canali possibili
con I quali avviene l’interazione riuscendo, così, a valutare i punti di snodo fra un canale e l’altro. Ciò permette di valutare
eventuali difficoltà e ostacoli che il cliente affronta per raggiungere i propri obiettivi. La mappatura dei differenti canali
aiuta a progettare un passaggio fluido fra un canale e l’altro permettendo di riuscire a fornire una buona esperienza utente
ed al tempo stesso, una buona riuscita sul mercato rispetto ai competitor.
Lo User Experience Design
Lo User Experience Design (UXD) è il processo di progettazione dell’esperienza utente, fornita dall’interazione tra il
cliente ed il prodotto, al fine di aumentare la soddisfazione, di migliorare l’usabilità, la facilità d’uso ed il piacere fornito
all’utente.
Come per il modello di Garrett, la UXD presenta due macro-aree, ovvero quella dei contenuti e quella delle interazioni.
A sovraintendere ci sono due discipline:
•
•
L’Architettura dell’Informazione (AI);
L’Interaction Design (IxD).
Queste erano già indicate da Garrett; in realtà per lo UXD, va aggiunta anche la Content Strategy (CS).
L’Architettura dell’Informazione (AI)
L’AI si occupa della struttura dei contenuti e della navigazione dei prodotti informativi. Essa opera sugli impianti del
sito attraverso il contenuto, lo cataloga, ne sceglie la logica, la navigazione e il modo in cui impostare il passaggio tra un
singolo elemento e l’altro. Il tutto affinchè le informazioni siano facilmente reperibili.
L’AI è la struttura su cui si reggono i sistemi digitali rappresentando lo scheletro, seppur invisibile, che sostiene l’intero
sistema. Oggi, come ieri, un’informazione non trovabile è un’informazione persa.
10
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Con l’avanzare della tecnologia, l’informazione diventa “a-spaziale” e può risiedere in più luoghi
contemporaneamente. L’AI si occupa di stabilire quali sono i luoghi più adatti per posizionare le informazioni e quali modi
e modelli usare per presentarle agli utenti.
Come un vero e proprio mediatore linguistico, l’AI traduce ed interpreta le richieste del cliente e le trasmette,
elaborandole, agli sviluppatori; essa lavora affinchè tutto il team sia orientato a soddisfare le necessità dell’utente. I
compiti dell’AI sono l’organizzazione, logica e semantica, della struttura delle informazioni e dei contenuti. Essa opera
sull’analisi e sulla scelta degli strumenti tecnici e culturali per l’organizzazione, la catalogazione, la ricerca, la navigazione
e la presentazione dei contenuti in ogni formato disponibile.
L’Interaction Designer (IxD)
Si occupa di progettare l’interazione tra i sistemi e gli utenti, resa ancora più importante nel Web 2.0 dove i sistemi
sono strategicamente interattivi e l’IxD gioca un ruolo chiave.
Tutto si bassa sulla Human Computer Interaction (HCI), che studia il rapporto esistente tra l’uomo e i sistemi
complessi. L’IxD progetta le sequenze di azioni e le relative risposte in base agli input degli utenti. In pratica studia i
fenomeni che si verificano quando un utente e un’interfaccia entrano in contatto documentando quali variabili
dell’interfaccia influenzano o meno l’interazione.
Tutti gli esperti concordano sul fatto che l’usabilità, da sola, non basti più a determinare il grado di gratificazione e
soddisfazione dell’utente.
L’ossimoro di oggi è “a sistemi sempre più complessi devono necessariamente corrispondere interfacce ed
interazioni sempre più semplici ed intutive”. L’IxD possiede una visione molto ampia del prodotto e delle sue
caratteristiche, conosce il contenuto, i destinatari, i loro modelli mentali e il contesto d’utilizzo.
L’IxD lavora a fianco della Content Strategy (descritta nella prossima sezione), del copywriter e dell’AI per realizzare
software, siti o parte di essi in maniera tale che le persone possano usarli in maniera facile ed intuitiva. I primi passi da
tenere sempre a mente devono contemplare gli utenti, chi sono, come si comportano e quali sono i loro obiettivi.
Il prodotto finale della IxD sono le user interface, che vengono realizzate attraverso due fasi:
Fase teorica/concettuale; trasforma i requisiti e i bisogni degli utenti in un modello concettuale. Il sistema
viene tradotto in idee e concetti sul suo funzionamento, su come dovrebbe comportarsi e su quale aspetto
deve avere per essere comprensibile e facilmente utilizzabile.
Fase pratica/operativa; definisce le specifiche delle interfacce e della sequenza delle azioni.
La caratteristica fondamentale dell’IxD è quella di lavorare su processi iterativi dove ad ogni azione corrisponde una
verifica sulle decisioni prese. L’utente ha sempre un ruolo decisivo in ogni scelta.
Content Strategy (CS)
La CS si occupa dei contenuti che nei prodotti digitali non è solo testo, ma audio, immagini, video ed etc. A volte sono
anche veri e propri metadati che fanno la differenza nel recupero dell’informazione. Il CS pianifica la creazione, la
pubblicazione e la governance dei contenuti strategici per il business e utili, al tempo stesso, agli utenti. La CS entra nel
processo della User Experience (UX) attraverso due caratteristiche:
capacità di reperire le richieste di chi utilizza il prodotto;
abilità a costruire una relazione con le altre professionalità nel processo iterativo di progettazione.
Gli ambiti d’azione della CS riguardano:
Demetrio Siclari
la strategia editoriale;
le Web writing;
la progettazione del sistema dei metadati;
la Search Engine Optimization.
11
La User Experience
Il content model è il documento strategico, redatto dalla CS, che definisce la forma del contenuto prima, durante e
dopo il rilascio del prodotto.
Progettare per le persone
Secondo Morville un sito deve essere: utile, usabile, astrattivo, trovabile (ovvero deve garantire il massimo del
recupero dell’informazione), credibile e valido. Oggigiorno questo non basta più! Un buon prodotto deve anche essere:
autoesplicativo, onesto, modulabile e sociale.
La UX si pone l’obiettivo di coinvolgere l’utente finale nell’intero processo di progettazione. Infatti, la regola n°1 è
“Ascoltare”. La UX deve tenere conto anche degli aspetti di desiderability, feasibility e viability di un prodotto tenendo a
mente la legge del minimo sforzo (least effort). Quest’ultima porta ad accettare contenuti di bassa qualità purchè siano
più facili da ottenere e più utili agli utenti. Bisogna, ovviamente, sempre considerare l’opzione in maniera ragionevole.
La berrypicking, ad esempio, consiste nella raccolta di informazioni per passi. L’utente si interessa ad informazioni
dirette e precise ed avvia una nuova ricerca per completare la raccolta delle informazioni in base alle proprie esigenze. Il
processo si ripete in maniera iterativa fino a quando l’utente non trova la quantità di informazioni rilevanti per lui.
Questa tecnica è molto utilizzata. Basta, infatti, pensare ad Amazon, uno dei sistemi di e-commerce più famosi al
mondo, non appena un utente osserva un prodotto, oltre a fornire informazioni su di esso, consiglia prodotti simili
indicando, anche, cosa ha acquistato dopo chi ha comperato lo stesso prodotto (Figura 1.6). Inoltre, propone gli oggetti
in offerta in base a cosa l’utente ha cercato ultimamente.
Oggi, infatti, si cerca di ottenere un’esperienza di tipo ponte che varia il contenuto della pagina a seconda dell’utente
cercando di offrirgli informazioni quanto più pertinenti possibili. L’obiettivo principale è portare la persona a restare il
maggior tempo possibile sulle pagine del sito stuzzicando la sua curiosità o la sua fame di informazioni e mantenendo un
alto grado di soddisfazione per l’utente.
Le fasi principali della progettazione UX sono:
1.
2.
3.
4.
5.
6.
Pianifica;
Analizza;
Crea;
Progetta;
Testa;
Gestisci.
Figura 1.6 Creazione dell"'esperienza ponte" su Amazon
12
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Pianifica
Durante questa fase si acquisicono quante più informazioni possibili e si valutano, insieme al team, i tempi e le
metodologie più idonei da utilizzare per sviluppare il progetto. È una parte denominata “progettazione esplorativa”; la sua
durata è relativamente breve. La fase serve a fissare alcuni punti importanti come gli obiettivi e le risorse per raggiungerli.
In particolare, la pianificazione coinvolge in maniera decisiva la strategia aziendale. I punti da chiarire sono:
Che cosa vogliamo ottenere con questo prodotto?
Quali sono gli obiettivi dell’azienda?
Cosa vogliamo comunicare con il prodotto? Perché?
Cosa vuole il cliente? Perché?
Le risposte a queste domande forniscono linee guida sulla strategia e sulla comunicazione da adottare. In questa
prima fase si elaborano i seguenti documenti:
identificazione e classificazione dei servizi;
analisi competitiva;
mappa concettuale;
inventario dei contenuti;
personae.
Le informazioni e le decisioni prese durante la pianificazione subiranno dei necessari assestamenti durante il corso
della progettazione. Gli obiettivi di progetto vengono rivisti di volta in volta in funzione degli incontri con gli utenti e con
i committenti.
Analizza
Nell’analisi precedente si è scelto da dove partire e con chi. Ora bisogna studiare le vie ed i percorsi da seguire.
Durante questo step si parte osservando e navigando il prodotto preesistente, individuando tutte le persone coinvolte
nel progetto. In particolare, si ceca di individurare chi lo utilizza, chi lo alimenta e chi lo gestisce. L’obiettivo è
comprendere che cosa funziona e, soprattutto che cosa ne pensano gli stakeholder e come essi desiderano il futuro
prodotto. Risulta importante, anche, analizzare i concorrenti per capire cosa offrono e come.
Durante questa fase si elaborano i seguenti documenti:
mappa del sito;
wireframe;
documenti con e sugli utenti;
pattern design;
prototipo.
Alcuni di questi documenti possono essere redatti in parallelo; altri potrebbero risultare superflui a seconda dei casi;
altri saranno redatti più volte nel corso della progettazione. Tuttavia, l’insieme di tali documenti costruiranno un
formidabile ponte di comunicazione tra tutti i professionisti coinvolti. Essenziali, quindi, dovranno essere la coerenza, la
chiarezza e la passione con cui viene effettuata la comunicazione.
Crea
Durante questa fase si entra nel cuore vero e proprio della progettazione. Una volta raccolte ed elaborate tutte le
informazioni, si passa ad ideare le possibili soluzioni.
Demetrio Siclari
13
La User Experience
In una prima sottofase è molto importante la presenza delle persone coinvolte per raccogliere le esigenze e per
tradurle in una classifica dei servizi. In questa sottofase si ascolta e si annota. L’obiettivo è capire le esigenze, le idee, le
soluzioni ed i problemi che i vari stakeholder hanno con l’attuale sistema.
La seconda sottofase comprende l’analisi competitiva, che serve a posizionare il sistema/portale all’interno del
mercato individuando le best practice, l’architettura, la navigazione, l’usabilità, la grafica ed i servizi che il prodotto finale
dovrà possedere.
La terza ed ultima fase prevede l’analisi qualitativa che descrive i prodotti dei concorrenti attraverso vari livelli.
L’obiettivo di questa sottofase è schematizzare alcune aree o servizi dei concorrenti per offrire un confronto diretto con
il sistema in sviluppo.
Possono essere prese in esame alcune aree semantiche come il sistema di labeling, tassonomie o gli stili visivi. I criteri
di valutazione di un sito possono essere i sequenti:
efficienza nella navigazione;
chiarezza organizzativa;
chiarezza del labeling;
chiarezza nel design;
leggibilità e scansione delle informazioni;
facilità con la quale l’utente raggiunge l’obiettivo;
efficienza del servizio di assistenza all’utente.
L’analisi qualitativa è importante per evidenziare, per ogni sito preso in considerazione, i punti di forza e quelli di
debolezza. A partire da questi sarà più facile decidere su quali servizi puntare ad offrire.
Al termine di questa fase vengono realizzati gli schemi descrittivi che combinano testo ed elementi visivi. Vengono
decisi i layout e le categorie della homepage e delle principali pagine interne facendo attenzione a realizzare dei percorsi
chiari ed intuitivi agli utenti per raggiungere le informazioni cercate.
La realizzazione di una mappa logica può aiutare a descrivere lo scenario da progettare riassumendo, in un colpo,
d’occhio gli attori e i processi coinvolti nel progetto. In Figura 1.7 viene mostrata la mappa concettuale del noto portale
di condivisione delle fotografie Flickr.
Figura 1.7 - Mappa concettuale di Flickr
14
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Progetta
Durante questa fase si crea l’architettura informativa con la mappa del sito e di tutti i sistemi di supporto alla
reperibilità delle informazioni (navigazioni, tag, tab, accordion, etc.). Vengono realizzati i wireframe rappresentativi della
struttura informativa delle pagine, dei servizi ed i loro funzionamenti (flowchart e analisi delle funzionalità). Essi
forniscono una buona panoramica sul progetto e devono basarsi sul documento delle personae (redatto durante la fase
di pianificazione) che fornisce il quadro del comportamento degli utenti e delle loro aspettative.
Alla fine di questa fase si arriva alla realizzazione di un prodotto verosimile attraverso il prototipo. I documenti
realizzati in questa fase sono:
mappa del sito;
wireframe;
process flow (contiene le sequenze compiute durante uno scenario specifico o da un utente tipo);
documenti con/su gli utenti (contengono i test di usabilità condotti con gli utenti);
pattern design (descrivono come dovrà funzionare una o più parti del sito);
prototipo.
Testa
Prima del suo rilascio, un prodotto deve essere testato in tutte le sue componenti. Il testing è un’attività iterativa che
va diffusa lungo tutto il corso del progetto. Il prodotto si testa prima dell’inizio della progettazione vera e propria e
durante tutte le fasi affrontate. Il piano dei test stabilisce tempi e modi di applicazione degli stessi. L’analisi dei risultati
dei test permetterà un miglioramento del prodotto finale. Durante questa fase devono essere coinvolti gli utilizzatori
finali facendo anche che essi compiano test di usabilità. Durante questo step si verifica l’eventuale presenza di uno
scollamento tra gli obiettivi iniziali ed il prodotto finale, compiendo eventuali aggiustamenti.
Gestisci
Questa fase valuta l’importanza di investire sul futuro del prodotto. Durante questa fase vengono elaborate le linee
e le soluzioni adottate durante tutto il processo di progettazione. Vengono redatte le pattern library, che sono una sintesi
delle scelte e delle soluzioni adottate. Questi documenti permettono di ricostrure la storia del prodotto per agevolare gli
sviluppi futuri. Il controllo ed il testing sui flussi di pubblicazione servono anch’essi a costruire soluzioni immediate di
miglioramento dei servizi offerti nonchè soluzioni su progettazioni future.
Mobile User Experience
Dalla presentazione del primo iPhone, nel 2007, il mondo del Web è stato letteralmente rivoluzionato in pochissimo
tempo, tanto che ormai si parla di mobile Web come unico approccio da adottare in futuro. Ma è così netta la differenza
fra il Web classico, per come lo abbiamo conosciuto per anni, ed il mobile Web?
Si parte dal presupposto che, in media, il tempo di interazione che abbiamo com il dispositivo mobile è di circa 17
minuti rispetto ai 39 minuti del PC desktop. Bisogna, però, considerare che l’interazione mobile non è spesso centrata sul
dispositivo. Siamo, infatti, sempre più abituati ad utilizzare lo smartphone o il tablet mentre attendiamo, mentre
conversiamo e mentre camminiamo. Di conseguenza, è necessario considerare un design specifico per questa esperienza
d’utillizzo.
Progettare il design per l’esperienza mobile non è affatto semplice. Basti pensare che ci sono nette differenze d’uso
e di utenti anche fra smartphone e tablet. Bisogna considerare che i diversi dispositivi hanno schermi con grandezza
Demetrio Siclari
15
La User Experience
diversa (Figura 1.8) e, soprattutto, che gli smartphone, oltre ad aver risoluzioni diverse (Figura 1.9), hanno proporzioni
e/o dpi diverse fra loro.
Figura 1.8 - Varie risoluzioni dei dispositivi
Quando si ha a che fare con i dispositivi mobili, considerare solo la risoluzione dello schermo non basta. Bisogna
tenere a mente anche il sistema operativo, la grandezza e la rete utilizzata per connettersi, che non sempre è a banda
larga. Si arriva, così, alla cosidetta “mobile equation” (Figura 1.10), per progettare una buona esperienza utente.
È necessario creare un vero e proprio piano che implementi le differenze d’uso di un dispositivo desktop ed uno mobile
sul nostro scenario d’interesse. Questo non deve essere visto come un problema, ma come un’opportunità perché i
dispositivi mobili sono spesso dotati di feature (come la geolocalizzazione, la fotocamera, diversi sensori, etc.) che
possono migliorare, se ben sfruttuati, l’esperienza utente e, quindi, la soddisfazione delle persone durante l’uso del
prodotto.
Figura 1.9 - Risoluzione degli smartphone
16
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 1.10 - Mobile Equation
È necessario pensare che per anni siamo stati abituati ad usare il mouse come “sostegno”; quando progettiamo per
mobile dobbiamo rinunciare all’accuratezza del mouse e considerare che si ha a che fare con touch (tocchi). Siamo
costretti, quindi, a ripensare la user experience e ridisegnare complementamente la visualizzazione delle informazioni.
In particolare, è necessario considerare che, spesso, gli smartphone vengono utilizzati con una mano sola ed alcune
aree dello schermo sono di più facile accesso rispetto ad altre. In Figura 1.11 viene mostrato l’uso con la mano destro dello
schermo dello smartphone.
Figura 1.11 - Aree dello schermo durante l'uso con la mano destra
Oltre a ciò bisogna considerare, anche, che i moderni dispositivi mobili prevedono delle funzionalità multi-touch in
grado di accedere a rapide feature con un semplice gesto (Figura 1.12).
Sfruttare al meglio tutte le funzionalità disponibili solamente per mobile, nonchè la diversità dei vari schermi a
disposizione degli utenti, vuol dire andare a disegnare differenti esperienze utente che non tengano soltanto conto della
persona, ma anche del dispositivo e della rete adottata per accedere al sistema.
In particolare, la creazione di un’app o versione mobile di un sistema software o sito Web richiede il lavoro congiunto
di:
Demetrio Siclari
User Experience Design;
User Interface Design;
sviluppatori.
17
La User Experience
Figura 1.12 - Multi-touch dei moderni dispositive
Mobile app o Responsive Web Design?
La scelta di costruire un’applicazione o un sito Web responsive è spesso un grosso dilemma. Oggigiorno, ci spinge a
realizzare un’applicazione ritenendo che questa sia la panacea dei dispositivi mobili per essere rilevanti, accessibili e cool,
invece, non è sempre così. Vediamo cosa offrono le due opzioni
Mobile app
Un’applicazione va realizzata utilizzando un linguaggio di programmazione appropiato in base al sistema operativo
finale. Ad esempio, per Android va utilizzato Java. L’applicazione deve essere, anche, in grado di gestire al meglio le
risorse del dispositivo. Deve essere, quindi, compatibile con i diversi dispositivi in circolazione e sfruttarne al meglio
memoria e processore. Un’applicazione mobile non richiede necessariamente una connesione, ma la progettazione
dell’esperienza utente deve tenere conto delle specifiche feature che un dispositivo offre. La geolocalizzazione GPS,
l’accelerometro, la fotocamera, etc. possono rilevarsi utili a migliorare l’usabilità, ma al tempo stesso, vanno ben integrati
con i servizi offerti. Non sempre sono necessari.
L’applicazione mobile richiede continui aggiornamenti per risultare compatibile con I nuovi dispositivi e con le nuove
versioni dei sistemi operativi rilasciati.
Monetizzare con le applicazioni è fattibile, ma va considerato il costo iniziale per sfruttare gli strumenti di sviluppo o
i costi per pubblicare l’app sui vari store dove, in genere, vengono trattenute anche delle percentuali sulle eventuali
vendite. Ad esempio, Apple o Google trattengono circa il 30%.
Responsive Web Design
Sino a qualche anno fa, i siti responsive, se confrontati con le applicazioni mobili, soffrivano i limiti dell’HTML. Con
HTML5 tutto è cambiato e l’approccio responsive è tornato molto di moda. Tramite tale approccio è possibile sfruttare il
browser presente in ogni dispositivo senza dover pensare alla versione e al sistema operativo utilizzati dal dispositivo
mobile. L’approccio responsive non richiede download, installazioni o registrazioni su nessun store. Il sito responsive può
essere costruito tramite la combinazione di HTML5 e CSS3 che permettono di creare layout flessibile e di sfruttare
interessanti feature per l’utente (trasparenze, gradient, etc.). É possibile, persino, sfruttare la geolocalizzazione GPS del
dispositivo per migliorare l’esperienza utente.
18
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Durante l’implementazione di un sito responsive non ci si deve preoccupare di supportare sia le nuove che le vecchie
versioni di sistemi operativi. Non bisogna correre ai ripari ad ogni rilascio di una nuova versione di sistema operative. Il
sito responsive funzionerà sempre se ben progettato.
Le accortezze da adottare quando si progetta un design responsive consistono nel considerare le varie risoluzioni dei
dispositivi e la grandezza del sito in termini di Kb. Se, ad esempio, il sito si apre in cinque secondi sul computer, sullo
smartphone, soprattutto se non collegato in WiFi, ma in 3G, ci si impiegherà molto di più. Si potrebbero impiegare anche
più di quindici secondi penalizzando, di molto, l’esperienza utente. L’utilizzatore, molto probabilmente, abbandonerà il
sistema prima ancora che termini il caricamento.
A meno che non si vogliano fornire funzionalità particolari sul mobile, quasi sempre conviene scegliere un responsive
Web design piuttosto che cimentarsi alla realizzazione di un’app mobile specifica.
L’UX mobile per migliorare le performance
Le esigenze degli utenti desktop e di quelli mobile sono molto differenti. É compito della UX cercare di soddisfare
entrambe riuscendo a soddisfare anche le persone che utilizzano dispositivi diversi per accedere al sito. Vanno,
innanzitutto, ridefiniti i fallmenti dell’applicazione software. In Figura 1.13 sono evidenziati i fallimenti di un sito Web. Se
per un sito desktop un 404 Error, relativo ad una pagina non trovata, risulta un fallimento, per il mobile i fallimenti si
traducono in secondi extra per il caricamento delle pagine in MB extra che consumano traffico dati o in click extra per
arrivare al contenuto.
Figura 1.13 - Ridefinizione dei fallimenti per il mobile
Per migliorare le performance da mobile è bene utilizzare qualche utile accorgimento. Accorciare i testi molto lunghi
può facilitare la consultazione delle informazioni. La presenza di pulsanti per continuare a leggere fornisce più libertà
all’utente permettendogli di caricare la informazioni a “pezzi”. Questo può rappresentare un buon compromesso per
agevolare la visualizzazione delle informazioni su schermi ridotti, senza comportare un grosso problema per l’utente,
riducendo al tempo stesso il peso del caricamento delle pagine.
Un lungo elenco, ad esempio, può essere accorciato mostrando i primi quattro elementi (Figura 1.14). Un apposito
tasto permetterà all’utente, se interessato, di continuare la consultazione delle informazioni.
Per le immagini vale lo stesso ragionamento. Elenchi di immagini sono inutili da mostrare agli utenti mobili. Le
immagini hanno un tempo di caricamento maggiore rispetto al testo poichè occupano più memoria. Meglio, quindi,
Demetrio Siclari
19
La User Experience
lasciare visibili solo alcune, magari in formato thumbnail, più leggero ed idoneo a schermi piccoli, lasciando, poi, dei tasti
per consultare le altre (Figura 1.15).
Figura 1.14 - Ridurre i testi con pulsanti di approfondimento
Figura 1.15 - Ridurre le immagini caricate
Anche il layout va ottimizzato per le versioni mobili. Una struttura a tre colonne va bene per un computer desktop
con ampio schermo, ma limita la navigazione in un piccolo smartphone. Per migliorare le performance in piccoli schermi
si può utilizzare un “layout allungato” ad una colonna. Esso può rilevarsi un buon compresso poichè riporta all’inizio le
informazioni più importanti o dinamiche della pagina in primo piano, senza la necessità di “zoommare” o spostarsi sul
contenuto. Lo scorrimento verso il basso, in più, è relativamente agevolato grazie la presenza del touch. (Figura 1.16).
20
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 1.16 - Responsive designer per smartphone e pc
In Figura 1.17 viene mostrata una possibile soluzione di un layout per smartphone e tablet.
Figura 1.17 - Possibile soluzione di layout per smartphone e tablet
Demetrio Siclari
21
Analisi dell’attuale sito di Ateneo
“Design is not just what it looks like and feels like. Design is how it works ” (Steve Jobs). In questo capitolo verrà
analizzato il portale di Ateneo per capire l’architettura utilizzata ed individuare le macro aree dei contenuti presenti. Verranno
anche, analizzate le statistiche per individuare gli utenti che accedono al portale e le iterazioni che compiono durante la
navigazione. Al termine dell’analisi verranno esaminati i possibili punti di forza e debolezza del portale, assieme alle possibili
opportunità e/o ai rischi in cui il progetto potrebbe andare incontro.
Analisi dell’attuale sito di Ateneo
Introduzione
Internet è una risorsa globale, universamente accessibile, che ha contribuito in maniera decisa a ridefinire i rapporti
tra le persone e tra queste e le istituzioni, nonchè a costruire nuove modalità di produzione e di accesso alla conoscenza.
Le novità apportate dalla rete hanno consentito lo sviluppo di una società più aperta e libera, in cui ogni individuo diventa
protagonista e contribuisce alla divulgazione delle informazioni.
In seguito all’avvento dei social network, Internet è diventata sempre più un mezzo di comunicazione dove
raggiungere le persone, anche sparse nel mondo. Grazie al Web ogni individuo può sentirsi protagonista. La società di
oggi, infatti, “vive” sul Web, trasmettendo il messaggio intrinseco “o sei social o sei nessuno”. Ciò, soprattutto negli ultimi
anni, grazie all’abbassamento dei prezzi, ai dispositivi mobili sempre più evoluti e alle coperture di rete sempre più
efficienti, ha portato sempre più persone a collegarsi ad Internet.
Nel 2014, secondo il rapporto dell’Internazional Telecommunicazion Union (ITU), oltre tre miliardi di persone sono
online (il numero di utenti di Internet è raddoppiato in appena cinque anni). L’Italia è in ritardo rispetto la media europea,
ma circa il 58% della popolazione sopra i sei anni usa Internet almeno una volta al mese, e il numero è in forte aumento.
Questi numeri rappresentano una ghiotta opportunità per chiunque vuole farsi conoscere per raggiungere i propri fan
e per le aziende per raggiungere i propri clienti. Internet è ormai un vero e proprio strumento per incrementare il proprio
business. Possedere un sito Web che rappresenti un’azienda, in bene o in male, è ormai un dovere.
È bene, però, tenere sempre a mente che un sito Web non rappresenta un obiettivo, ma un mezzo. Non deve
presentare, ma deve funzionare. Il sito Web non è solo una vetrina, ma permette di generare contatti, preventivi o
vendite. Un sito deve riuscire a generare risultati concreti e misurabili in accordo con le esigenze aziendali di marketing e
remunerazione. Esso diventa messaggero della reputazione e peculiarità di un’impresa o ente.
Un sito di qualità deve rispondere sia agli obiettivi dell’azienda che ai requisiti dei clienti. Gli aspetti che
contribuiscono a determinare la qualità sono diversi e devono essere considerati nell’analisi. Quest’ultima può essere
divisa in due aree:
Logico funzionale; è la parte che si occupa di come il sito è costruito, della sua struttura e della logica
dell’architettura Web.
Semantica; si occupa dello studio dei contenuti per valutare come essi vengono comunicati ed i significati
trasmessi.
Queste due aree rendono conto, in maniera sintentica dei diversi aspetti che costituiscono il fattore di qualità di un
sito Web.
Elementi strutturali ed architettura di un sito Web
Ogni sito ha una struttura che prevede delle pagine in aree funzionali secondo convenzioni alle quali gli utenti sono
oramai abituati. Un esempio di layout di un sito Web è riportato in Figura 2.1. Le parti ormai tipiche nei siti Web sono:
Header o testata; contiene il titolo del sito o il logo, mostra gli strumenti di navigazione e ricerca e le
principali sezioni del sito in miniatura.
Main content o area del contenuto; racchiude contenuti veri e propri della pagina.
Colonna/e o sidebar; contiene link e feed e permette la navigazione interna; possono essere una o due, a
seconda delle necessità; possono essere posizionate sulla destra o sulla sinistra.
Footer o piè di pagina; contiene le informazioni di contatto, i riconoscimenti ed eventuali link di
approfondimento.
La home page ha spesso una struttura diversa dalle pagine interne. Non è detto sia la prima pagina ad essere
visualizzata, ma è sicuramente la più importante del sito. Coma la copertina di una rivista o come la prima pagina di un
24
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
giornale, la home page è, sicuramente, il biglietto da visita del sito. Essa deve contenere informazioni semplici ed efficaci
sul sito, mostrare le novità ed offrire punti d’accesso ad ogni parte del sito stesso.
Figura 2.1 - Esempio di layout di un sito Web
I contenuti devono essere ben posizionati all’interno della pagina. Essi devono aver maggior evidenza rispetto al resto
ed integrarsi al meglio con gli elementi grafici. È importante, infatti, scegliere accuratamente:
dimensioni dei caratteri; in particolar modo dei titoli;
immagini; esse hanno un impatto maggiore rispetto al testo;
combinazioni dei colori; vivaci, a contrasto o tenui e armonici.
Quando un visitatore interagisce col sito, deve “apprendere al momento” la struttura del sito analizzando anche le
interazioni possibili o suggerite. È molto importante, quindi, la posizione del contenuto all’interno della pagina.
In Figura 2.2 sono riportate quelle che, secondo Google, sono le aree di maggiore attenzione; in arancione vengono
evidenziate le aree sotto il titolo e quelle relative al contenuto principale. Tramite questa “mappa” possiamo valutare la
disposizione dei contenuti in base all’importanza che vogliamo dare ad esse. Esistono diversi modi per organizzare i
contenuti all’interno di una pagina. Gli strumenti più utilizzati sono: Affinity Diagram, Card Sorting, Blind Voting.
Bisogna tenere a mente che l’architettura del sito e la navigazione, in base ai contenuti proposti, permettono di:
rispondere ai bisogni degli utenti;
rendere visibili i contenuti principali;
assecondare i modelli mentali degli utenti stessi.
Se un’architettura è ben fatta, per il contesto per cui è utilizzata, ridurrà al minimo gli errori ed il tempo per completare
i vari task da parte degli utilizzatori, offrendo, al tempo stesso, una buona esperienza utente durante l’interazione col
portale.
Demetrio Siclari
25
Analisi dell’attuale sito di Ateneo
Vi sono diverse architetture possibili anche se le più utilizzate sono quelle gerarchiche. Tra queste le concave, larghe
e poco profonde, sono le più efficienti. In Figura XXX viene mostrato un esempio di struttura concava efficiente, la
6x2x2x12 rappresenta, infatti, un buon compromesso fra larghezza e profondità.
Figura 2.2 - Aree di maggiore attenzione secondo Google
Il numero ottimale per lo sviluppo orizzontale dell’architettura è 7±2 livelli, mentre per lo sviluppo verticale è di 4-5
livelli.
Per quanto riguarda gli schemi di navigazione, l’architettura permette agli utenti di esplorare contenuti di un sito
appartenenti a categorie diverse nonché contenuti di approfondimento appartenenti tutti ad una stessa categoria. Non
tutte le posizioni di una pagina Web sono adatte ad accogliere gli strumenti di navigazione. È meglio, infatti, collocare
l’area di navigazione nel corpo principale, non creare molteplici aree di navigazione per lo stesso tipo di link e non rendere
attivo il link alla home page che appare nella stessa home page.
Gli schemi di navigazione più utilizzati sono:
linguette in alto a cascata;
barra verticale sulla sinistra;
elenco link in alto;
menu a tendina
Figura 2.3 - Struttura concava efficiente 6x2x2x12
26
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Quando si organizzano l’architettura e la disposizione dei contenuti di un sito Web è necessario cercare di ricostruire
la “navigazione tipo” di un utente considerando sia l’utente che già conosce il sito, quello che visualizza la pagina per la
prima volta.
Il primo, non appena accede alla home page si dirige verso la “porta d’ingresso” alla risorsa cercata seguendo la sua
“mappa personale”. Durante la navigazione questo tipo di utente sarà distratto dal suo focus soltanto dagli elementi in
forte contrasto con il resto del layout (slider, animazioni, etc.) posti ad hoc dal Web deisgner sulla sua strada, o da testi
contenenti in risalto parole chiave di suo interesse.
Per i nuovi utenti si ragiona considerando che i contenuti di un sito Web vengono visti più o meno come si farebbe
con una pagina di giornale. L’obiettivo è prevedere il modo con cui l’utente si muoverà all’interno della pagina ed
organizzarla in maniera tale da migliorare la user experience.
In generale, quando si accede ad un nuovo sito Web, il primo punto che si osserva è la parte posta nell’angolo in alto
a sinistra (oppure nell’angolo in alto a destra per chi legge da destra verso sinistra). Il percorso visivo che l’utente segue è
una specie di “F” che focalizza l’attenzione sulla parte alta della pagina, contenente di solito l’header, e subito dopo si
sposta al centro della pagina dove ci si aspetta di trovare le informazioni cercate. La parte di destra viene visualizzata,
generalmente, per ultima e, prima di un eventuale scorrimento della pagina verso il basso. La parte in basso della pagina,
non immediatamente visibile, cattura raramente l’attenzione. Infatti, ben quattro persone su dieci usano raramente o
mai la barra di scorrimento durante la navigazione. La parte inferiore della pagina ha, quindi, buona possibilità di non
essere mai visualizzata. In Figura 2.4 viene riportato un esempio di come viene visualizzata una pagina Web da parte di
una persona.
Figura 2.4 - Come viene visualizzata una pagina Web
Analisi dell’attuale portale dell’Università Meditarrenea
Inventario dei contenuti
In caso di progettazione o restyling di un sito è sempre buona norma realizzare un inventario dei contenuti. Esso è
molto importante poiché, col tempo, ogni sito è soggetto ad accrescere la propria mole di contenuti perdendo a volte
traccia dei contenuti stessi presenti.
Demetrio Siclari
27
Analisi dell’attuale sito di Ateneo
L’inventario dei contenuti porta a conoscenza di cosa c’è sul sito, se sono presenti informazioni obsolete, non accurate
o, peggio, in contraddizione fra loro. È bene anche uniformare il tono della comunicazione in funzione del target.
L’inventario dei contenuti fa emergere, anche, l’architettura informativa del sito, permettendo, così, di diversificare
le diverse macroaree e di aiutare, quindi, a comunicare chiaramente cosa propone il sito.
Il sito unirc.it ha una struttura prettamente gerarchica che, a partire dalla home page, ha cinque sezioni principali
(Figura 2.5). Ad ogni sezione segue uno sviluppo verticale variabile in più livelli. In Figura 2.6 viene mostrato il menu di
navigazione principale dei primi cinque sottolivelli.
Figura 2.5 - Sezioni principali del portale unirc.it
Ogni sottosezione prevede da due a più livelli verticali.
Figura 2.6 - Menù di navigazione principale delle macro sezioni del portale unirc.it
Nelle prossime sottosezioni daremo uno sguardo ai cinque nodi principali del sito
Nodo N1. Ateneo
In Figura 2.7 viene mostrato il nodo “Ateneo”, che racchiude tutte le informazioni relative all’Università. Ogni figlio di
Ateneo, a suo volta, si espande in più sottolivelli. Il figlio N1.7 “Amministrazion trasparente” ha un albero di navigazione
28
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
non modificabile, specificato dal Decreto del 14 marzo 2013 n° 33, che stabilisce la struttura e la denominazione delle
sotto sezioni di primo e di secondo livello del nodo stesso. Per questa ragione tale nodo è riportato in rosso.
Figura 2.7 - Nodo Ateneo
Nodo N2. Didattica
In Figura 2.8 viene mostrato il nodo relativo alla didattica dell’Ateneo. In particolare esso contiene le informazioni
relative agli insegnamenti erogati dai vari dipartimenti. Alcune informazioni sono acquisite, mediante Web Service, dalla
piattaforma smart_edu/GOMP.
Figura 2.8 - Nodo Didattica
Demetrio Siclari
29
Analisi dell’attuale sito di Ateneo
Nodo N.3 Studenti
In Figura 2.9 viene mostrato il nodo che contiene tutte le informazioni utili allo studente
Figura 2.9 - Nodo Studenti
Nodo N.4 Ricerca
In Figura 2.10 viene mostrato il nodo relativo alla Ricerca. In esso sono contenute tutte le informazioni relative alle
attività di ricerca svolte presso l’Ateneo.
30
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 2.10 - Nodo ricerca
Nodo N.5 International
In Figura 2.11 viene mostrato il nodo dedicato alla dimensione di internazionalizzazione dell’Ateneo. Esso contiene le
informazioni relative alle attività internazionali svolte dall’Università. In esso ha particolare rilevanza il programma
Erasmus.
Figura 2.11 - Nodo International
Demetrio Siclari
31
Analisi dell’attuale sito di Ateneo
Le pagine di Unirc.it
I contenuti all’interno del sito sono organizzati sulla base di un layout a due o tre colonne, a seconda della pagina
(Figura 2.12). La navigabilità del portale unirc.it è garantita tramite un menù superiore a due livelli e mediante un
menu verticale, ad espansione, posto sulla colonna di sinistra.
Figura 2.12 - Layout delle pagine di unirc.it
L’analisi delle pagine ha evidenziato i contenuti significativi e le funzionalità fornite. Durante questa fase si porta
maggior attenzione sugli elementi della pagina e su come essi vengono proposti all’utente. Si è data più importanza alle
informazioni immediatamente individuabili già al primo scroll1 della pagina. Nelle prossime sottosezioni veranno
analizzate le più importanti tipologie di pagine che caratterizano l’attuale sito di Ateneo.
La home page del sito
In Figura 2.13 è visibile la home page del portale di Ateneo; in particolare, è possibile osservare le varie parti che
compongono la pagina stessa. La home page è strutturata con una grafica gradevole non responsive ed è studiata per
enfatizzare gli eventi organizzati dall’Ateneo. Essi, infatti, sono visualizzati in un ampio slider che occupa metà della
schermata. Un ampio menù suddiviso per parole chiave offre l’accesso alle varie macro-sezioni del portale stesso.
Nel dettaglio, gli elementi principali che caratterizzano la home page sono i seguenti:
1.
2.
3.
Primo scroll: parte della pagina immediatamente visibile all’accesso da personal pc.
Logo: simbolo che contraddistingue il sito dell’Università Mediterranea di Reggio Calabria.
Area login: collegamenti rapidi alla form d’autenticazione al portale.
1 Parte della pagina visibile senza utilizzare le barre di scorrimento. La sua estensione dipende dalla risoluzione dello
schermo adottata
32
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
4.
5.
6.
7.
8.
9.
10.
11.
Icone lingua: bandierine per accedere al portale in lingua italiana (default) o inglese.
Quick link: collegamenti rapidi a funzionalità o pagine del portale
Slide articoli: notizie, eventi o iniziative in risalto per l’Ateneo.
Macro sezioni: punti d’accesso alle principali sezioni del portale.
Slide immagini: presentazioni di immagini relative ad un evento.
Articoli in evidenza: comunicazioni in evidenza o guide.
News Ateneo: novità dell’Ateneo in ordine cronologico di data.
Footer: area contenente i contatti dell’Università, le icone per l’accesso alle pagine dei social network, le note
legali e quelle relative alla privacy.
Figura 2.13 - Analisi della home page
La home page di un sito dipartimentale
In Figura 2.14 viene riportata la home page di un sito dipartimentale. La filosofia generale e le caratteristiche principali
di tale pagina rispecchiano in modo fedele quanto già detto per la home page del sito generale.
Nel dettaglio, gli elementi individuati nella home page di un sito dipartimentale sono i seguenti:
1.
2.
3.
4.
Primo scroll: parte della pagina immediatamente visibile all’accesso da personal computer.
Logo: simbolo che contraddistingue il sito dell’Università Mediterranea di Reggio Calabria.
Area login: collegamenti rapidi alla form d’autenticazione al portale.
Icone lingua: bandierine per accedere al portale in lingua italiano (default) o inglese.
Demetrio Siclari
33
Analisi dell’attuale sito di Ateneo
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Quick link: collegamenti rapidi a funzionalità o pagine del portale
Menù principale: area per garantire la navigazione alle sezioni principali del sito.
Breadcrumbs: percorso per arrivare alla pagina attuale.
Utility: tasto per stampare o per condividere la pagina (quest’ultima funzionalità, in realtà, non è stata ancora
implementata)
Slider: slider con immagini relative ad eventi o notizie importanti per l’Ateneo
Articoli in evidenza: principali articoli e avvisi per gli studenti.
Corsi di studio: informazioni sui vari corsi di studio attuati presso il dipartimento e accesso ai corrispettivi piano
di studi, con relativi insegnamenti.
Studiare: collegamenti a pagine di utilità per gli studenti, come gli orari delle lezioni, la segreteria, etc.
Avvisi didattica ed Eventi in Ateneo: collegamenti all’elenco degli avvisi relativi alla didattica e agli eventi
imminenti in Ateneo
Footer: area contenente i contatti dell’Università, le icone per l’accesso alle pagine dei social network, le note
legali e quelle relative alla privacy.
Figura 2.14 - Analisi della home page di un dipartimento
Un esempio di pagina interna del sito
In Figura 2.15 viene riportato un esempio di pagina interna del sito. I principali elementi che si possono individuare in
questa pagina sono i seguenti:
1.
34
Primo scroll: parte della pagina immediatamente visibile all’accesso da personal computer.
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Logo: simbolo che contraddistingue il sito dell’Università Mediterranea di Reggio Calabria.
Area login: collegamenti rapidi alla form d’autenticazione al portale.
Icone lingua: bandierine per accedere al portale in lingua italiana (default) o inglese.
Quick link: collegamenti rapidi a funzionalità o pagine del portale.
Menù principale: area che garantisce la navigazione alle sezioni principali del sito.
Menù contestuale: menù che rimane invariato durante la navigazione di ciascuna sezione.
Breadcrumbs: percorso per arrivare alla pagina attuale.
Utility: tasto per stampare o per condividere la pagina (quest’ultima funzionalità, in realtà, non è stata ancora
implementata).
Menù di navigazione verticale: funzionalità per garantire la navigazione all’interno della sezione.
Area contenuto: area nella quale sono presenti le informazioni con immagini fisse e in movimento.
Area avvisi/news/eventi: area dedicata a contenuti variabili per ogni sezione.
Area avvisi/news/eventi: area dedicata a contenuti variabili per ogni sezione.
Footer: area contenente i contatti dell’Università, le icone per l’accesso alle pagine dei social network, le note
legali e quelle relative alla privacy.
Figura 2.15- Analisi di una pagina interna di unirc.it
La pagina riservata relativa agli studenti
In Figura 2.16 viene mostrato un esempio di pagina riservata relativa agli studenti. Nella trattazione verranno
esaminate soltanto le sezioni specifiche di tale area, mentre verranno tralasciate quelle comuni alle pagine di front-end.
I principali elementi specifici che si possono individuare in questa pagina sono i seguenti:
Demetrio Siclari
35
Analisi dell’attuale sito di Ateneo
1.
Area profilo: area in cui figura il nome dello studente, il tipo di profilo, il link all’area riservata e quello per
effettuare il logout. Una volta avvenuto il login, tale area sarà sempre presente in ogni pagina.
2. Matricola: area dove viene indicato il numero di matricola dello studente che si è autenticato; tramite essa
l’utente può modificare la propria password.
3. Benvenuto: area dove viene visualizzato il nome utente e dato un messaggio di benvenuto.
4. iMed: box a icone in cui vi è una serie di informazioni utili, come gli avvisi, le news del dipartimento, quelle
relative agli studenti, le convenzioni, le news del corso di studio, la rassegna stampa, l’help desk, le
propedeuticità, le convocazioni, le delibere.
5. Tab-Box: box con due tab, il primo riguardante l’anagrafica dello studente e il secondo relativo all’indirizzo email istituzionale, con le relative istruzioni per accedervi.
6. Eventi in Ateneo: elenco degli eventi previsti in Ateneo.
7. Notizie in Ateneo: elenco degli ultimi dieci articoli pubblicati sul sito.
8. Servizi online: sezione relativa ai servizi online per gli studenti; attualmente è presente soltanto il servizio di
mailing list poiché la maggior parte dei servizi è stata spostata sulla piattaforma GOMP.
9. Memo: blocco note in cui è possibile salvare annotazioni.
10. Servizi agli studenti: voci di collegamento rapide ai servizi utili allo studente.
11. Carriera studente: voci di collegamento rapido ad informazioni presenti anche nessuna sezione relativa allo
studente (accessibile anche senza autenticazione).
Figura 2.16 - Analisi della pagina riservata dello studente
36
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
La pagina riservata relativa ai docenti
In Figura 2.17 viene presentato un esempio di pagina riservata relativa ai docenti. Come nel caso degli studenti, nella
trattazione verranno esaminate soltanto le sezioni specifiche di tale area, mentre verranno tralasciate quelle comuni alle
pagine di front-end.
I principali elementi specifici che si possono individuare in questa pagina sono i seguenti:
1.
2.
3.
4.
5.
6.
7.
8.
Area profilo: area in cui figura il nome del docente, il tipo di profilo, il link all’area riservata e quello per effettuare
il logout. Una volta avvenuto il login, tale area sarà sempre presente in ogni pagina.
Foto: box con la foto del docente, la sua matricola e il link per il cambio della password.
Benvenuto: area dove viene visualizzato il nome e viene dato un messaggio di benvenuto.
iMed: box a icone in cui vi è una serie di informazioni utili, come la posta in arrivo, il cedolino, il CUD, le circolari,
le news relative al CRAL, le convocazioni, l’agenda di Ateneo, le news, le convenzioni, la newsletter.
Tab-Box: box con quattro tab; il primo riguarda l’anagrafica del docente; il secondo è relativo al riepilogo e alla
gestione della sua carriera; il terzo riguarda il prospetto contributivo; il quarto è relativo alla gestione della
didattica; in esso il docente ha la possibilità di gestire la propria mailing list, di caricare materiale didattico e di
inserire avvisi e orari di ricevimenti.
Rassegna stampa: elenco degli ultimi dieci articoli pubblicati sul sito.
Menù: link alle funzionalità utili al docente.
Memo: blocco note in cui è possibile salvare annotazioni.
Figura 2.17 - Analisi pagina riservata del docente
Demetrio Siclari
37
Analisi dell’attuale sito di Ateneo
La pagina riservata al Personale Tecnico-Amministrativo
In Figura 2.18 viene presentato un esempio di pagina riservata relativa al Personale Tecnico-Amministrativo. Come
per i casi precedenti, nella trattazione verranno esaminate soltanto le sezioni specifiche di tale area, mentre verranno
tralasciate quelle comuni alle pagine di front-end.
I principali elementi specifici che si possono individuare in questa pagina sono i seguenti:
1.
Area profilo: area in cui figura il nome del dipendente, il tipo di profilo, il link all’area riservata e quello per
effettuare il logout. Una volta avvenuto il login, tale area sarà sempre presente in ogni pagina.
2. Foto: box con la foto del dipendente che si è autenticato, la sua matricola e il link per il cambio della password.
3. Benvenuto: area in cui viene visualizzato il nome e viene dato un messaggio di benvenuto.
4. iMed: box a icone in cui vi è una serie di informazioni utili, come la posta in arrivo, il cedolino, il CUD, le circolari,
le news relative al CRAL, gli avvisi relativi alle organizzazioni sindacali, quelli relativi alla intranet, l’agenda di
Ateneo, le convenzioni, la newsletter, la sezione dedicata alle RSU.
5. Tab-Box: un box con tre tab; il primo riguarda l’anagrafica del dipendente; il secondo riguarda il riepilogo e la
gestione della propria carriera; il terzo è relativo al prospetto contributivo.
6. Rassegna stampa: elenco degli ultimi dieci articoli pubblicati sul sito
7. Menù: link alle funzionalità utili al dipendente.
8. Amministrazione: link alle funzionalità più usate.
9. Memo: blocco note in cui è possibile salvare annotazioni.
10. Valigetta Zimbra: link utili per l’utilizzo di Zimbra, il Web mailer adottato dall’Ateneo.
Figura 2.18 - Analisi della pagina riservata del PTA
38
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Analisi delle statistiche
L’analisi delle statistiche di accesso e dei percorsi di navigazione permette di conoscere meglio gli utenti e, quindi, di
migliorare le prestazioni del sito Internet. Questo processo è fondamentale per le attività di Web marketing. Lo studio
dei dati di traffico, infatti, non solo permette di verificare i risultati ottenuti con il posizionamento, ma fornisce anche gli
strumenti per raggiungere nuovi obiettivi e per capire cosa cerca esattamente chi accede al sito.
Grazie ai tanti strumenti gratuiti messi a disposizione, ad esempio Google Analytics, è possibile tenere traccia di ogni
visitatore risalendo, così, alla sua provenienza, al percorso che ha seguito per arrivare al sito, alle azioni che ha compiuto
all’interno di esso e al tempo che ha dedicato a ciascuna pagina. L’analisi e l’elaborazione di tali informazioni sono molto
importanti per capire quale è la rotta da seguire durante il restyling di un sito Web.
In Figura 2.19 vengono riportate le stastiche d’accesso al portale di Ateneo da marzo 2011 sino ad oggi. La frequenza
di rimbalzo indica la percentuale dei visitatori che non sono andati oltre la prima pagina da loro acceduta.
Figura 2.19 - Statisiche di accesso al portale di Ateneo
Da questi dati si sono potute estrapolare interessanti informazioni, come la lingua dei visitatori (Tabella 2.1Errore.
L'origine riferimento non è stata trovata.), il dispositivo utilizzato (Errore. L'origine riferimento non è stata trovata.)
o il browser adottato per accedere al portale (Tabella 2.3). Tali informazioni risultano molto utili per progettare e
realizzare il nuovo portale di Ateneo.
Lingua
Italiano
Inglese
Spagnolo
Francese
Tedesco
Cinese
%
94,51
4,87
0,17
0,12
0,04
0,03
Tabella 2.1 - Lingua dei visitatori del portale
Demetrio Siclari
39
Analisi dell’attuale sito di Ateneo
Dispositivo
%
79,42
Desktop
17,13
Mobile2
3,45
Tablet
Tabella 2.2 - Dispositivo utilizzato dai visitatori
Browser
%
35,01
Chrome
26,21
IE
18,68
Firefox
11,70
Safari
Android Browser
6,54
0,48
Opera
Altri browser o app mobile
1,01
Tabella 2.3 - Browser utilizzati dai visitatori
I dati in tabella mostrano la necessità che il futuro portale di Ateneo sia compatibile con la maggior parte dei browser
utilizzati, sia responsive per adeguarsi al dispositivo utilizzato, e sia totalmente multilingue (per lo meno bilingue, ovvero
capace di supportare l’italiano e l’inglese).
In Figura 2.20 sono visualizzate le sorgenti di traffico principali; tale informazione è utile per capire la provienienza
degli utenti. La sorgente “direct” indica che Google Analytics non è riuscito ad identificare la provenienza del visitatore.
Molto probabilmente l’utente ha digitato direttamente nella barra degli indirizzi del browser l’URL del sito oppure ha
cliccato su un collegamento posto all’interno di un file pdf o di una e-mail. É bene considerare che ben il 41,34% dei
visitatori provenienti da sorgenti “direct” hanno abbandonato, o quasi, la pagina senza accedere ad altri contenuti. Ben il
37,31% (più di una persona su tre) degli utenti è entrato direttamente sul sito digitando nella barra degli indirizzi
www.unirc.it, ma ha abbandonato la pagina senza consultare ulteriori contenuti, nonostante la home page non
contenga contenuti veri e propri a meno delle news. Molti utenti lo utilizzano come home page del browser.
Nelle Figura 2.21 e Figura 2.22 sono visualizzate le informazioni relative al flusso degli utenti sul portale e sulle sessioni
effettuate. La prima figura tiene conto di una parte delle sessioni, ma mostra, in linea di massima, i percorsi principali
compiuti dagli utenti prima di abbandonare il sito. La seconda è un riepilogo delle visualizzazioni di pagina, con i contenuti
che hannno ricevuto più visite.
2
40
Solo nel 2014 la % è salita al 31,82
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 2.20 - Analisi delle sorgenti di traffico
Figura 2.21 – Analisi dei flussi principali degli utenti sul portale
Demetrio Siclari
41
Analisi dell’attuale sito di Ateneo
Figura 2.22 - Analisi delle sessioni utente
Uno strumento molto utile è l’analisi dei dati in-page. Essa tiene traccia dei click compiuti dall’utente all’interno delle
pagine. In Figura 2.23 viene mostrata tale tipologia di analisi dei dati in-page per la home page del portale. Curiosamente
sono presenti molti click effettuati sulla parte in alto a sinistra. Essi sono dovuti, molto probabilmente, dall’abitudine degli
utenti di osservare la pagina posizionando il cursore del mouse sulla parte in alto a sinistra e cliccare con il mouse per
spostarsi all’interno della pagina. La maggior parte del click avviene sul tasto di accesso per il personale (sono i maggiori
utilizzatori del portale) e sul tasto di scorrimento delle news nello slider. La percentuale dei click diminuisce man mano
che la pagina scende verso il basso diventando quasi nulla dopo lo scroll della pagina. Le voci del menù più cliccato sono
“esami di stato”, ed i punti di accesso ai dipartimenti, alle pagine degli studenti e a quella relativa all’organizzazione
dell’Ateneo
Figura 2.23 - Analisi dei dati in-page per la home page
Analisi SWOT
L’analisi SWOT (conosciuta anche come matrice SWOT) rappresenta un potente strumento di analisi e di
pianificazione strategica che ha diversi campi d’impiego tra cui l’analisi del software. È uno strumento molto utile per
avere un quadro generale rapido del prodotto, analizzato attraverso una disamina delle sue peculiarità. In particolare
evidenzia:
42
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
I punti di forza (Strenghts);
i punti di debolezza (Weaknesses);
le opportunità (Opportunities);
le minacce (Threats).
I punti di forza e di debolezza dipendono dal sistema sotto analisi e, quindi, sonomodificabili.
Le opportunità e le minacce, invece, derivano dal contesto esterno e, quindi, sono difficilmente gestibili dai
progettisti; tuttavia è necessario tenerli sotto controllo in modo da sfruttare il più possibile le opportunità e di ridurre il
più possibile i rischi. In Figura 2.24 viene schematizzata l’analisi SWOT relativa all’attuale portale di Ateneo.
Figura 2.24 - Analisi SWOT per il portale unirc.it
Demetrio Siclari
43
Le interviste con gli stakeholder
Dopo aver analizzato il portale di Ateneo, in questo capitolo, valuteremo l’esperienza reale dei vari utenti che utilizzano il
sistema per valutarne i punti di criticità, i problemi e come progettare al meglio il futuro sito. Le interviste sono uno strumento
fondamentale per analizzare a fondo le reali necessità degli utenti e per aiutare i progettisti a immedesimarsi nelle persone
che fruiranno i loro servizi.
Le interviste con gli stakeholder
Introduzione
Le interviste agli stakeholder sono un ottimo strumento del processo di analisi e permettono di raccogliere molte
indicazioni e feedback qualitativi. Intervistare i fruitori del sistema aiuta a capire gli utilizzi, le preferenze e le frustrazioni
che le persone hanno interagendo con il prodotto.
Molti dati di un sito in fase di restyling si possono ottenere attraverso le analisi delle statistiche di strumenti come
Google Analytics che misura i click, i percorsi seguiti dalle persone e come queste si muovono all’interno del sistema, ma
non è in grado di restituire il quadro emotivo ed esperienziale degli utenti. Attraverso le interviste è possibile avere uno
scenario completo riuscendo, così, a definire meglio:
gli obiettivi del progetto;
i requisiti di business;
gli attributi chiave per gli utenti.
Un’intervista tipo può variare dai 45 ai 60 minuti, può richiedere un luogo tranquillo e gli strumenti necessari per
un’eventuale registrazione audio/video. É bene definire già da subito gli obiettivi delle interviste in modo da circoscrivere
il contesto e focalizzare l’attenzione sugli aspetti critici del sistema.
É buona norma prepararsi in anticipo ed accogliere l’intervistato con la massima apertura e disponibilità, cercando
sempre di mettere la persona a proprio agio. Si inizia l’incontro presentandosi e descrivendo il tipo di attività che si andrà
a svolgere; è importante chiedere sempre il permesso prima di registrare ed, in caso di rifiuto, armarsi di carta e penna
per segnare i punti chiave dell’incontro.
Durante l’intervista si consiglia di creare un clima colloquiale in cui l’intervistato possa descrivere, nel modo più
sincero possibile, la propria esperienza ed i propri punti di vista personali durante l’approccio al sistema. Nel caso in cui la
conversazione si dilunghi su aspetti che non riguardano i fini dell’intervista spetta alla sensibilità dell’intervistatore
cercare di riportare l’attenzione sugli obiettivi del colloquio. È opportuno cercare di evitare, se è possibile, i “botta e
risposta” dove l’intervistatore legge freddamente le domande.
In questi incontri, in cui sono coinvolti i vari stakeholder, è possibile raccogliere e catalogare le esperienze degli utenti
ottenendo, così, diverse tipologie di output.
I risultati ottenuti fanno emergere i principali problemi del prodotto attuale ed eventuali consigli per migliorare e
perfezionare la progettazione del nuovo sistema. I dati raccolti permettono, anche, di realizzare le experience map o il
documento sulle personas.
In base agli obiettivi delle interviste è necessario identificare il campione di persone da intervistare. Il numero dei
partecipanti varia a seconda del progetto, ma l’importante è coinvolgere tutte le tipologie di utenti che hanno accesso al
sistema in maniera tale da avere, al termine delle interviste, una prospettiva completa. Nella prossima sezione
cercheremo di individuare le persone da intervistare per il portale dell’Ateneo.
Individuazione degli stakeholder
Gli stakeholder sono i soggetti, o i gruppi di soggetti, che hanno maggior influenza all’interno di un progetto. Ad
esempio, nel caso di un portale aziendale, fanno parte degli stakeholder i clienti, i fornitori, i collaboratori, ma anche i
gruppi di interesse esterni, come aziende vicine o potenziali investitori.
Nel caso specifico del portale di Ateneo, gli stakeholder coincidono con gli utenti che utilizzano il sito per ricercare
informazioni o servizi.
Nel nostro caso è stata redatta una sorta di “mappatura degli stakeholder” che prevede, per ciascuno stakeholder (o
cluster di stakeholder), l’individuazione dei principali bisogni, delle necessità e delle modalità di accesso al sito.
L’individuazione degli stakeholder primari ha portato ad una prima suddivisione degli stessi in “interni” ed “esterni”
Il primo stakeholder interno individuato, a cui si è cercato di dar maggior spazio possibile, è lo studente iscritto. In
particolare, si è individuato lo studente del primo anno, lo studente in itinere e quello laureando o laureato. Per ognuno
46
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
di essi si sono cercate di individuare le necessità e le esigenze che lo possono spingere ad accedere al portale. Gli altri
attori interni individuati sono stati il docente ed il personale tecnico amministrativo.
Per quanto riguarda gli stakeholder esterni, sono stati individuati i futuri studenti, sia italiani che internazionali, che
possono accedere al portale cercando informazioni sull’Ateneo e sull’offerta didattica, nonché le aziende e/o gli enti che
entrano in contatto con l’Università.
Nella Tabella 3.1 sono riassunti i principali stakeholder individuati.
Stakeholder interni
Futuro studente
Studente iscritto:
Stakeholder esterni
matricola;
studente in itinere;
laureando o laureato
Docente
Studente internazionale
Personale tecnico amministrativo
Ente o impresa
Tabella 3.1 - Principali stakeholder individuati
In collaborazione con il Consiglio degli Studenti e con il personale dell’Università è stato possibile individuare un
campione di persone da intervistare per contribuire a realizzare un’analisi completa e funzionale del portale di Ateneo.
Interviste ai docenti
I docenti sono una figura chiave per l’Università. Oltre a visualizzare informazioni sul sito possono gestire la didattica
dei loro corsi, inserendo, ad esempio, i dati e avvisi utili agli studenti.
I docenti utilizzano spesso il sito e, quindi, rappresentano degli ottimi candidati per segnalare eventuali problemi o
migliorie. Si è cercato, pertanto, di creare, più che un’intervista vera e propria, una sorta di dialogo bidirezionale e di
impressioni emerse interagendo col sistema. Assieme ai docenti si è cercato, anche, di immedesimarsi negli studenti
segnalando eventuali problemi riscontrati o noti.
Per ognun docente si è poi cercato di analizzare alcuni task specifici dell’area riservata, come la gestione della
didattica, l’inserimento degli avvisi, etc.
Si era previsto inizialmente di non superare i trenta minuti di intervista, ma la disponibilità delle persone coinvolte e
l’entusiasmo dimostrato verso l’iniziativa hanno portato le interviste ad una media di 43 minuti. Al termine di ogni
incontro è stata redatta una scheda riassuntiva che descrive:
il tipo di utente ed i motivi principali che lo portano ad accedere al portale;
gli obiettivi prefissati assieme per migliorare il sistema;
le necessità di servizi o contenuti attualmente mancanti;
l’uso dei dispositivi mobili per accedere al portale e gli eventuali problemi riscontrati;
l’utilizzo dell’area memo presente all’interno della propria pagina riservata;
l’importanza della presenza delle news all’interno del portale e il livello di consultazione delle stesse da parte
del docente;
una valutazione complessiva del sistema attuale.
Di seguito vengono riportate alcune delle schede riassuntive dei docenti intervistati:
Demetrio Siclari
47
Le interviste con gli stakeholder
48
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Demetrio Siclari
49
Le interviste con gli stakeholder
50
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Dalle varie interviste con i docenti non sono emersi particolari problemi con l’utilizzo del portale. Essi vi accedono
quotidianamente, e con il tempo hanno imparato a conoscere il sistema e a muoversi al suo interno, anche se, qualche
problema, soprattutto nel reperire alcune informazioni, non manca. La loro attenzione principale sono gli studenti, che
segnalano spesso problemi o difficoltà durante le lezioni o i ricevimenti.
La maggior parte dei docenti condivide l’opinione che la home page è chiara e ben fatta. La grafica piace e le news
incuriosiscono e fanno conoscere le attività svolte nell’Ateneo. Tuttavia, la home page è orientata esclusivamente agli
utenti interni e non trasmette ai visitatori l’idea dell’Università fatta di persone, e di una comunità scientifica che lavora
ed innova con interessanti risultati che non vengono adeguatamente valorizzati.
L’interno del sito, invece, non è semplice e, spesso, si può finire per perdersi fra le tantissime informazioni presenti.
Secondo i docenti gli studenti fanno fatica a muoversi all’interno del sito o, addirittura, non lo usano perché offre troppe
informazioni da dover scremare, ed i menù di navigazione non sono intuitivi, con continui “salti” da una sezione all’altra
che finiscono per confondere. Inoltre, molti validi strumenti messi a disposizione, come la mailing list dei corsi, non
vengono utilizzati dagli studenti, probabilmente perché il portale manca di attrattività per loro.
Per quanto riguarda le attività specifiche, sarebbe opportuno potenziare la gestione della didattica ed offrire più
funzionalità al docente, come la completa personalizzazione del suo profilo e la possibilità di gestire dalla sua pagina
riservata la prenotazione delle aule per le attività didattiche.
Interviste al personale tecnico amministrativo
Il personale tecnico amministrativo comprende tutti i dipendenti non docenti dell’Università con attività e mansioni
ben precise in base alla propria area di appartenenza. Essi sono fra i maggiori utilizzatori del portale. Inseriscono dati,
depubblicano avvisi o bandi scaduti e supportano gli studenti e gli altri utenti alla ricerca di informazioni. Spesso, sono
proprio loro a conoscere i limiti ed i maggiori problemi che gli utenti, gli studenti in primis, hanno quando si approcciano
al sistema. Come per i docenti, si è cercato di realizzare, più che un’intervista, un dialogo bidirezionale durante una
Demetrio Siclari
51
Le interviste con gli stakeholder
sessione di navigazione sul portale. Anche i PTA hanno risposto entusiasti all’iniziativa preparando, spesso, utili consigli
da proporci già prima del nostro arrivo.
Si è cercato di focalizzare l’attenzione sulle pagine riservate e sulle mansioni specifiche di ogni dipendente,
evidenziando eventuali problemi riscontrati o limiti del sistema.
Alle persone intervistate è stato chiesto, essendo spesso a contatto sia con le aziende che con gli studenti, di
immedesimarsi in un utente esterno che si approccia al sistema e di valutare la reale difficoltà di interazione con il sito
che, nel tempo, essi hanno imparato bene ad usare.
Grazie al loro contributo è stato possibile capire bene quali sono i principali problemi che le persone riscontrano
interagendo col sito e quali sono le aree e/o le informazioni più cercate.
Al termine di ogni incontro è stata redatta una scheda riassuntiva che descrive:
il tipo di utente ed i motivi principali che lo portano ad accedere al portale;
gli obiettivi prefissati assieme per migliorare il sistema;
le necessità di servizi o contenuti attualmente mancanti;
l’uso dei dispositivi mobili per accedere al portale e gli eventuali problemi riscontrati;
l’utilizzo dell’area memo presente all’interno della propria pagina riservata;
l’importanza della presenza delle news all’interno del portale e quanto realmente l’utente le consulta;
una valutazione complessiva del sistema attuale.
Qui di seguito alcune delle schede riassuntive dei PTA intervistati:
52
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Demetrio Siclari
53
Le interviste con gli stakeholder
Le interviste col PTA sono state molto utili anche perché il personale usa moltissimo l’attuale sistema e, spesso,
interagisce anche con i portali delle altre Università segnalando così interessanti spunti di miglioramento. Alla maggior
parte delle persone intervistate il sito piace e col tempo ha imparato a muoversi su esso, anche se nessuno nasconde le
difficoltà che ci possono essere nel reperimento di informazioni da parte di utenti meno pratici. Essendo a contatto spesso
con studenti o enti ed aziende, i dipendenti del PTA hanno potuto anche segnalarci problemi e migliorie per aiutare
queste due tipologie di utenti.
Dalle interviste è emerso un problema di aggiornamento delle sezioni dovuto anche alla mancanza di una mappatura
delle responsabilità delle varie pagine. Non è, infatti, immediata la segnalazione di contenuti non aggiornati o non
corretti, dal momento che non si conosce esattamente il responsabile di ogni pagina.
Interviste agli studenti
Come sottolineato da molti dipendenti durante le interviste, gli studenti sono il target principale da considerare per
la progettazione del nuovo portale di Ateneo. Essi, a differenza del personale PTA o del docente, che hanno un accesso
quasi continuo e quotidiano con il sistema, interagiscono poco con esso. Essendo il campione degli studenti molto vasto,
gli stessi sono stati suddivisi in tre macro-gruppi: gli immatricolati, gli studenti in itinere, e i laureandi o quelli appena
laureati. Ogni macro-gruppo ha necessità e problematiche diverse che si è cercato di far trapelare il più possibile
attraverso le interviste. Al termine di ogni intervista agli studenti è stato somministrato un questionario per riuscire a
ottenere anche dei valori quantificabili dell’esperienza utente in alcuni precisi task o su alcuni aspetti specifici del portale.
Qui di seguito alcune delle schede riassuntive degli studenti intervistati:
54
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Demetrio Siclari
55
Le interviste con gli stakeholder
56
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Demetrio Siclari
57
Le interviste con gli stakeholder
Le interviste sono state utili per conoscere meglio i fruitori principali del sistema e per capire bene quali sono le loro
reali esigenze. Ogni persona ha i propri bisogni, ma quello che lega tutti è una sorta di frustazione nell’uso del sito. In
molti si sono lamentati delle informazioni non corrette presenti sul portale o sulla loro disposizione labirintica. Il sito è
risultato poco intuitivo e molti hanno affermato che preferiscono usare i motori di ricerca o chiedere ai colleghi dove
trovare le informazioni che cercano, rinunciando, in partenza ad “avventurarsi” sul sito dell’Ateneo.
Il portale manca anche di attrattiva per gli utenti e le news risultano essere belle da vedere, ma poco utili. Agli studenti
piace vedere le novità all’interno del sito, ma, al tempo stesso, ritengono che il “continuo bombardamento” di eventi e
news, a volte scaduti o di non interesse, distolgono solo l’attenzione dalle informazioni veramente utili. Inoltre, le notizie
veramente utili agli studenti, come i bandi Erasmus, le nuove offerte del Job Placement in merito a possibili opportunità,
come borse di studio o contratti di collaborazione, sono messe in secondo piano nascoste.
I questionari hanno evidenziato la necessità che il sito sia ottimizzato per gli smartphone, riproponga alcuni dei
contenuti presenti ormai solo su GOMP (il passaggio a quest’ultima piattaforma ha creato non pochi disagi agli studenti),
e sia un po’ più interattivo e chiaro nei contatti e nel dove trovare i vari uffici.
Tutti o quasi gli intervistati nei questionari hanno dato punteggi bassi alla navigabilità del sito e alla reperibilità di
informazioni.
Interviste ai ragazzi delle superiori
Fra gli stakeholder esterni i più importanti sono i ragazzi che stanno per terminare le superiori e cominciano a pensare
al loro futuro. Il sito rappresenta il primo approccio al mondo universitario. È, perciò, indispensabile che il nuovo portale
di Ateneo sia a misura del visitatore, che sia accattivante ed, al tempo stesso, fornisca in maniera chiara e semplice le
informazioni che potrebbe cercare un ragazzo alle sue prime interazioni con il sito.
A tale proposito sono stati intervistati alcuni ragazzi, provenienti da scuole differenti, per cercare di capire come loro
si approcciano al sito e quali sono i suoi punti di forza e di debolezza dal loro punto di vista.
Qui di seguito alcune delle schede riassuntive degli studenti intervistati:
58
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Demetrio Siclari
59
Le interviste con gli stakeholder
I ragazzi delle superiori hanno risposto entusiasti all’iniziativa, anche se la timidezza iniziale ha condizionato
qualcuno.
Si è, quindi, optato per lasciar navigare all’inizio liberamente i ragazzi per capire come si muovono sul sito e quali
percorsi seguono al fine di individuare quali sono le parti che catturano la loro attenzione. Al termine è stato chiesto di
effettuare task specifici, come trovare l’offerta formativa o le informazioni per iscriversi.
Complice il menu a sinistra ad espansione, non proprio intuitivo, muoversi all’interno del portale per molti non è stato
semplice. La home page è apparsa per tutti molto chiara, ma, superata la prima pagina, sono arrivati i primi problemi.
Non tutti riescono a trovare le informazioni per iscriversi e chi le trova non comprende appieno i passi necessari da
compiere per iscriversi. I testi troppo lunghi, le pagine vuote o con collegamenti mancanti non hanno certo entusiasmato
i ragazzi che avrebbero preferito più dinamicità e maggiori informazioni sull’orientamento in entrata, utili a capire magari
cosa offrono i vari corsi di laurea e le attività in ambito scientifico svolte dall’Università.
In particolare, ad alcuni sarebbe piaciuta una sezione con le esperienze degli studenti universitari e le attività
lavorative svolte dai laureati una volta terminati i loro studi
60
Demetrio Siclari
Elicitazione
In questo capitolo verranno introdotti alcuni utili strumenti per aiutare a progettare la nuova architettura di un sito Web.
Ancora una volta, gli utenti saranno i protagonisti della predisposizione delle categorie e degli elementi; sulla loro base sarà
organizzato il nuovo portale. Questa fase è molto cruciale per ideare i percorsi di navigabilità e ricerca del nuovo sito.
Elicitazione
Introduzione
Integrando i dati provenienti dall’analisi del portale e dalle interviste con gli stakeholder con gli obiettivi dati
dall’Ateneo si sono individuate le caratteristiche che dovrà possedere il nuovo sito e le loro priorità. Una volta chiaro cosa
si deve fare è necessario rianalizzare i contenuti attuali eliminando cose non necessarie ed aggiungendo le nuovi voci
necessarie. A questo punto è possibile cominciare ad immaginare le possibili voci di menù del nuovo sistema. Ancora una
volta saranno le persone a essere coinvolte, con il loro supporto, mattoncino dopo mattoncino, verrà realizzata la nuova
struttura dei contenuti. A partire da questa sarà possibile cominciare a progettare e a realizzare il nuovo portale. Nelle
prossime sezioni vedremo alcune tecniche UX di elicitazione per coinvolgere gli utenti durante questa fase; in particolare,
concentreremo la nostra attenzione sul Card Sorting, sul Free Listing e sul Tree Testing.
Card sorting
È una tecnica diffusa per comprendere il modello mentale dell’utente ed organizzare un sito Web, partendo da una
struttura base, facendo ordinare agli utenti stessi gli elementi nelle categorie per loro più opportune. Si tratta di un
modello utilizzato come test di usabilità ed è utile per scoprire come le altre persone organizzano i propri contenuti. Esso
permette di sapere:
quali dovrebbero essere le categorie di navigazione del sito;
come gli utenti pensano ai contenuti e dove li posizionerebbero;
come raggiungere o etichettare i contenuti.
Al termine del card sorting si ottiene una struttura intuitiva, semplice e facile da consultare. Il necessario per svolgere
un Card Sorting sono:
un campione dei contenuti da classificare;
i partecipanti al sondaggio;
il tempo per analizzare i risultati.
Possono tornare utili all’analisi strumenti come la similarity matrix, che identifica i cluster più evidenti e aiuta a
scegliere abbinamenti alternativi, o i dendrogrammi, che aiutano a raggruppare i contenuti nel modo migliore possibile.
Esistono due tipi di Card Sorting: aperto o chiuso. Il primo lascia piena liberta ai partecipanti. Questi ultimi hanno in
mano tutte le sezioni del sito e dovranno organizzarle secondo la propria logica.
Nel Card Sorting chiuso, invece, le persone vengono messe di fronte agli argomenti già organizzati e possono avere
tre diversi input:
1.
2.
3.
Le categorie, ma non gli articoli.
Le categorie e gli articoli.
Le categorie e gli articoli, ma precedentemente ordinati.
Il primo input è utile se l’obiettivo è quello di scoprire ciò che manca da un sistema già esistente o di scoprire le priorità
dell’utente. Il secondo input permette di stabilire la terminologia più chiara da usare e di scoprire le aree che potrebbero
creare confusione. Il terzo input è utile se l’obiettivo finale è non stravolgere l’architettura di base, ma ottenere feedback
dettagliati sulle specifiche categorie, elementi o parti del sistema.
Il Card Sorting è un metodo veloce; le persone hanno a disposizione dai trenta ai sessanta minuti per organizzare la
propria architettura. Lo UX designer ha il compito di osservare, fotografare e, soprattutto, ascoltare i ragionamenti che
conducono all’una o all’altra scelta.
In Figura 4.1 viene mostrato un tipico esempio di una sessione di Card Sorting.
62
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 4.1 - Esempio di una sessione di Card Sorting
Free Listing
È un metodo che aiuta a comprendere i modelli mentali delle persone. I partecipanti vengono raggruppati in piccoli
gruppi di cinque o sei persone alle quali viene chiesto di creare delle liste di elementi partendo da una macro categoria. Il
Free Listing è utile per capire come pensano le persone e quali sono le parole che usano e che meglio associano ad un
elemento o un gruppo di voci. Al termine, attraverso dei diagrammi di affinità, è possibile raggruppare temi simili
appartenenti alla stessa famiglia in modo da stilare un quadro di sintesi del modo in cui pensano i nostri utenti e capire
quali sono le voci di menu più idonee da usare.
Tree Testing
È una tecnica di usabilità ideata per poter valutare la facilità di reperibilità degli argomenti di un sito Web. Nota anche
come reverse Card Sorting è tipicamente, usata per siti di grandi dimensioni organizzati secondo una struttura gerarchica,
appunto ad albero, di argomenti principali e secondari. A differenza dei tradizionali test di usabilità il Tree Testing non
viene eseguito sul sito stesso, ma su una versione testuale della struttura semplificata. Ciò assicura che la struttura venga
valutata indifferentemente dagli effetti dei supporti alla navigazione o di visual design.
Il metodo base prevede di assegnare un compito ad ogni partecipante e farlo muovere verso il basso attraverso
l’albero (drill down) sin quando non trova un argomento che soddisfa il compito o sin quando non decide di rinunciare.
Ad ogni attività il partecipante deve ripartire sempre dalla parte superiore dell’albero.
I risultati ottenuti dai test riescono a rispondere alle seguenti domande:
Demetrio Siclari
l’utente riesce a trovare gli elementi nella struttura?
l’utente riesce a trovare le voci direttamente senza dover risalire di nuovo l’albero?
se non riesce a trovare l’oggetto dove va?
i percorsi da seguire durante la discesa dell’albero sono rapidi senza soffermarci troppo?
63
Elicitazione
in generale, quale parte dell’albero ha funzionato bene e quale male?
Testing della struttura del portale di Ateneo
Una volta individuata una possibile struttura del portale di Ateneo, e condizionati da alcune scelte obbligatorie legate,
ad esempio, al fatto che si doveva realizzare un sito Web istituzionale, si è pensato di realizzare una sorta di Tree Testing
costruito su delle tavole A3. Il possibile albero dei contenuti del futuro sistema è stato integrato con un mockup
d’esempio di una possibile configurazione di home page. Questo per aiutare i partecipanti ad inquadrare meglio le varie
macrosezioni. Nel seguito viene riportato l’albero dei contenuti originario, sottoposto ai partecipanti.
Nella Figura 4.2 viene riportato l’albero dei contenuti delle sezioni principali.
Figura 4.2 - L'albero dei contenuti delle sezioni principali
64
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
In Figura 4.3 viene riportata l’albero dei contenuti previsto per il Futuro studente.
Figura 4.3 - L'albero dei contenuti previsto per il futuro studente
Demetrio Siclari
65
Elicitazione
In Figura 4.4 viene riportata l’albero dei contenuti previsto per lo studente iscritto.
Figura 4.4 - L'albero dei contenuti previsto per lo studente iscritto
66
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
In Figura 4.5 viene riportato l’albero dei contenuti previsto per lo studente internazionale.
Figura 4.5 - L'albero dei contenuti previsto per lo studente internazionale
Demetrio Siclari
67
Elicitazione
In Figura 4.6 viene riportato l’albero dei contenuti previsto per il laureando o laureato
Figura 4.6 - L'albero dei contenuti per il laureando o laureato
68
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
In Figura 4.7 viene riportato l’albero dei contenuti previsto per l’impresa o per l’ente.
Figura 4.7 - L'albero dei contenuti previsto per l'impresa o per l'ente
Demetrio Siclari
69
Elicitazione
In Figura 4.8 viene riportato l’albero dei contenuti previsto per il personale
Figura 4.8 - L'albero dei contenuti previsto per il personale
Tale struttura è stata proposta a tutti gli stakeholder interni all’università Mediterannea di Reggio Calabria, coinvolti
a vario titolo nel progetto, come gli studenti, i docenti, i ricercatori, gli assegnisti, il personale dell’area amministrativa e
di altri uffici interni all’università, ma anche a studenti esterni, non ancora iscritti all’università.
Per svolgere tale attività, la struttura in questione è stata stampata e consegnata di persona a dei gruppi o a singoli
individui, allegando una tabella per le proposte di spostamento, di eliminazione o di aggiunta di contenuti. In totale sono
stati coinvolti undici gruppi composti da studenti appartenenti ai vari dipartimenti e iscritti ad anni diversi, tre gruppi
composti da docenti, tre gruppi formati dal Personale Tecnico Amministrativo, un assegnista, un ricercatore, un gruppo
composto dal personale dell’Ufficio Esami di Stato, un gruppo composto dal personale dell’Ufficio Relazioni
Internazionali e Progetti Europei e un gruppo composto dal personale dell’Ufficio Supporto alle Attività di Ricerca e
Trasferimento Tecnologico. A ciascuno di loro è stato chiesto di visionare attentamente l’albero dei contenuti e di tenere
in considerazione alcuni importanti fattori, prima della riconsegna. Tra questi fattori citiamo:
70
la chiarezza dei termini;
la completezza delle voci scelte per il menù principale;
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
la completezza delle tipologie di utente;
la completezza dei contenuti di ciascuna sezione;
la coerenza semantica dei contenuti per ciascuna sezione;
l’ordine e la posizione dei contenuti;
l’efficienza del filtraggio dei contenuti in base alla tipologia utente;
l’utilità delle informazioni presenti;
la semplicità delle strutture;
l’immediatezza di ricerca di un contenuto.
Per quanto concerne gli studenti, il primo gruppo era composto da studenti del Dipartimento di Agraria, il secondo
da studenti laureandi e laureati dei dipartimenti di Architettura. Il terzo gruppo è composto da una studentessa del
Dipartimento di Agraria. Il quarto gruppo era formato da alcuni studenti del Dipartimento di Agraria, quasi al termine
della carriera universitaria, Il quinto da otto studenti del DIIES, il sesto gruppo da studenti presi “a caso” al bar di
Ingegneria. Il settimo, l’ottavo e il nono gruppo erano composti da studenti del DIIES. Il decimo gruppo era composto
dagli studenti dello Student Office mentre l’undicesimo era costituito da laureandi del DIIES.
Per quanto riguarda i docenti, il primo e il secondo gruppo erano composti da alcuni docenti del Dipartimento di
Agraria. Un terzo gruppo era costituito da un docente del DIIES.
Per quanto riguarda il Personale Tecnico Amministrativo, il primo e il secondo gruppo erano costituiti da responsabili
delle segreterie didattiche. Il terzo gruppo era costituito dai responsabili dell’Area amministrativa-gestionale.
Sono stati, altresì, intervistati: un assegnista del Dipartimento di Agraria, un ricercatore, il personale dell’Ufficio Esami
di Stato, il personale del Servizio Relazioni Internazionali e Progetti Europei, nonché il personale del Servizio Supporto
alle Attività di Ricerca e Trasferimento Tecnologico.
Al termine di tutte queste interviste e della corrispettiva attività di tree testing si è ottenuta una struttura delle
informazioni parecchio diversa da quella di partenza. Tale struttura viene di seguito riportata. In particolare, in Figura 4.9
viene riportata la struttura delle informazioni delle sezioni principali.
Figura 4.9 - L'albero dei contenuti delle sezioni principali rivisitato
Demetrio Siclari
71
Elicitazione
La struttura informativa rivisitata relativa alla regione “Studiare alla Mediterranea” viene riportata in Figura 4.10.
Figura 4.10 - La struttura informativa rivisitata della regione "Studiare alla Mediterranea"
In Figura 4.11 viene riportata la struttura delle informazioni rivisitata relativa allo studente.
Figura 4.11 - La struttura informativa rivisitata relativa allo studente
72
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
In viene riportata la struttura informativa rivisitata relativa alla regione “Internazionalizzazione”.
Figura 4.12 - La struttura informativa rivisitata relativa alla regione "Internazionalizzazione"
La struttura informativa rivisitata relativa al laureando o laureato viene mostrata in Figura 4.13.
Figura 4.13 - La struttura informativa rivisitata relativa al laureato o laureato
Demetrio Siclari
73
Elicitazione
In figura viene riportata la struttura informativa rivisitata pensata per le imprese o gli enti esterni.
Figura 4.14 - La struttura informativa rivisitata pensata per le imprese o gli enti esterni
In figura viene mostrata la struttura informativa relativa al docente
Figura 4.15 - La struttura informativa rivisitata relativa al docente
74
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
La struttura informativa rivisitata per il “Personale Tecnico Amministrativo” viene riportata in Figura 4.16.
Figura 4.16 - La struttura informativa rivisitata per il Personale Tecnico Amministrativo
In Figura 4.17 viene mostrata la struttura informativa rivisitato per il dottorando o dottore di ricerca.
Figura 4.17 - La struttura informativa rivisitata per il dottorando o dottore di ricerca
Demetrio Siclari
75
Elicitazione
Dopo aver terminato l’attività di Tree Testing, la struttura delle informazioni è abbastanza stabile. Ci sono, di
conseguenza, tutte le condizioni per poter procedere con la realizzazione dei mockup. Quest’ultima attività sarà
l’argomento del prossimo capitolo.
76
Demetrio Siclari
Progettazione dei wireframe
In questo capitolo verrà progettato il layout del nuovo portale di Ateneo. Sarà decisa la struttura più idonea da utilizzare e
alcuni aspetti grafici che il sistema dovrà avere per riuscire a realizzare una buona UX. In particolare, verranno realizzati i
wireframe delle pagine più importanti a partire dai quali verrà, poi, implementato il codice per ottenere il prodotto finale.
Progettazione dei wireframe
Introduzione
Dopo l’approvazione della nuova struttura dei contenuti da parte degli stakeholder, è possibile procedere con la
realizzazione dei wireframe; questi non sono altro che dei bozzetti, fatti per lo più su carta, per rappresentare gli schemi
delle pagine finali e il peso assegnato ai vari contenuti. I wireframe forniscono una visione panoramica sul progetto. Essi,
infatti, sono dei veri modelli “in fil di ferro” (usando la traduzione letterale) dei contenuti principali delle pagine del sito
costituiti da line pulite e senza grafica. Tali modelli rappresentano il legame tra l’idea, le intenzioni e gli obiettivi, da una
parte, e il display finale dall’altra. Il wireframe ha, quindi, la funzione di:
comunicare l’idea iniziale del progetto;
focalizzare l’attenzione sull’architettura e sui contenuti;
comunicare che cosa si vedrà;
essere la base del prototipo.
I wireframe sono utili per eseguire test di usabilità quando si sottopone al cliente la struttura prima che essa assuma
la forma definitiva attraverso codice e grafica.
Il passo successivo ai wireframe (Figura 5.1), nel processo di progettazione UX, sono i mockup; quest’ultimi sono una
rappresentazione statica del progetto finale dalla qualità medio-alta che, a volte, coincide col il progetto finale vero e
proprio. I mockup hanno la funzione di:
rappresentare, nel dettaglio, i vari contenuti;
dimostrare le funzionalità base del sistema;
mostrare il lato grafico del progetto.
Figura 5.1 - Il raffinamento dei wireframe per arrivare ai mockup
Un mockup, grazie al suo alto livello grafico, sarà molto più esaustivo di un wireframe.
Dopo i mockup vengono realizzati i prototype (o prototipi) che, come il modellino di un palazzo, rappresentano una
parte funzionale del sito. Essi sono il mezzo più potente della fase di testing e di documentazione, vengono realizzati con
i codici HTML e CSS e permettono al cliente di testare con mano l’esperienza di navigazione. Le pagine prototipo saranno
graficamente molto simili al prodotto finale, ma composte da pochi contenuti, il minimo indispensabile per esporre in
maniera esauriente il progetto.
Il tempo di realizzazione di un prototipo è molto alto durante il processo di comunicazione del design scelto poiché,
oltre che pensare al layout finale, si dovranno anche sviluppare i documenti HTML e CSS correlati.
A seconda delle necessità, in alcuni progetti, si può scegliere di saltare il passo di prototipazione della UX e di passare
direttamente dal mockup allo sviluppo. Tale scelta può essere fatta per abbassare i costi ed i tempi di progetto. In questi
casi il mockup ha un’importanza aggiuntiva poiché diventa il “progetto” più importante durante tutta la fase di sviluppo.
78
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Tralasciando le fasi della progettazione UX, i mockup contribuiscono anche a compilare la guida di stile. Essi, infatti,
offrono una documentazione visiva dello stile del prodotto, in maniera tale da poter tagliare ed incollare gli elementi
presenti per creare una veloce guida di stile.
I wireframe del nuovo portale di Ateneo
Dopo aver costruito la nuova architettura delle informazioni, mediante il Tree Testing personalizzato, coinvolgendo
il maggior numero possibile di stakeholder, si è passati alla realizzazione dei wireframe delle principali pagine. Essendo il
reperimento delle informazioni, a causa dei troppi dati presenti sull’attuale portale, il maggior problema riscontrato da
parte degli utenti, si è optato, in accordo con l’ufficio Marketing e ComunicazioneSstrategica, di utilizzare una struttura
a tile. Nella prossima sezione analizzeremo lo stile a tile per valutarne gli eventuali pro e contro di tale approccio.
Tile Style
Lo stile a tile, presente ad esempio nello Start di Windows 8 (Figura 5.2), aiuta a formare un linguaggio visivo comune
tra i progettisti e gli stakeholder poiché fornisce un catalizzatore verso i vari obiettivi del progetto.
Figura 5.2 - Finestra start di Windows 8
Uno stile a tile è utile quando ci sono home page con contenuti vaghi o composte da troppo testo. Il tile riesce a
stabilire una connessione diretta tra gli elementi reali di un’interfaccia ed il suo contenuto senza definirne il layout.
Con i tile è possibile definire una sorta di linguaggio visivo, (Figura 5.3), tramite la composizione dei vari tile all’interno
della pagina. Si può “giocare” sui colori, sulla disposizione e sulla grandezza dei tile stessi per trasmettere all’utente
sensazioni ed informazioni diverse.
Demetrio Siclari
79
Progettazione dei wireframe
Figura 5.3 - Definizione di un linguaggio visivo tramite la composizione dei tile
I tile rappresentano anche un modo più semplice e diretto di raffinamento del visual design rendendo più veloce il
raggiungimento degli obiettivi finali della grafica. L’uso dei tile, in sintesi, comporta i seguenti vantaggi:
Riduce la complessità e chiarisce gli obiettivi; dalle fasi di progettazione, sino alla fase di rilascio lo stile a tile
aiuta ad interfacciarsi in maniera semplice con gli utenti e a mantenere gli obiettivi di progetto, riuscendo
ad ottenere un design semplice ed efficace composto da pochi elementi grafici.
Aiuta a risparmiare tempo; un approccio grafico del tipo “pixel-perfect” richiede molto tempo per la
realizzazione e, soprattutto, per i test di compatibilità; usando, invece, un approccio a tile si spende meno
tempo e, in caso di modifica, bastano pochi minuti anziché ore.
Mantiene alti gli standard; i tile consentono di sperimentare rapidamente diversi concetti di design ed
offrono molte alternative di progettazione in base alle esigenze; creando una struttura base è poi possibile
variarla con semplicità e rapidamente senza dovere rinunciare alla qualità del codice o del prodotto finito.
Facilita la progettazione responsive iniziale; la struttura a tile si adatta bene per essere visualizzata in tutti i
dispositivi; usando uno stile a tile si potrà progettare senza tenere conto della risoluzione utilizzata e si
dovranno usare solo piccoli accorgimenti in fase finale di sviluppo.
Il processo di creazione dei tile richiede quattro fasi:
ascoltare;
interpretare;
definire;
iterare;
Il primo passo consiste nel capire le esigenze degli utenti identificando i loro obiettivi e le loro difficoltà. Questa fase
permette di identificare lo stile finale che dovranno avere i tile. La fase successiva è capire, dopo aver conosciuto gli utenti,
i termini o le immagini più adatti che popoleranno i tile. Successivamente si definisce la composizione del primo stile di
tile (colori, tipografia, grandezze, etc.) usando sia la creatività che il buon senso. Una volta creato il primo tile
iterativamente si rieffettua il processo di creazione dei tile scegliendo se variare o meno lo stile scelto per esso, a seconda
delle necessità.
Non esiste un limite fisso di stili da realizzare, ma 3-4 sono il giusto compromesso per non stravolgere gli utenti con
troppe opzioni. In Figura 5.4 viene riportato un esempio di composizione di tile con stili differenti.
80
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 5.4 - Esempio di composizione di tile con più stili
Home page
Seguendo le linee guida provenienti dalle interviste con gli stakeholder si è strutturata la pagina cercando di
focalizzarsi sugli utenti esterni dell’Università. In Figura 5.5 viene mostrato il wireframe relativo alla home page del sito.
In particolare, si è scelto di mettere in evidenza i contatti già nell’header e di ripeterli anche nel footer, dove sono
generalmente presenti nella maggior parte dei portali.
L’header contiene, sul lato sinistro, il logo dell’Università e un link rapido per l’accesso alle utenze interne alle proprie
sezioni. Sempre in alto si trova il collegamento rapido alla rubrica per la ricerca del personale (funzionalità molto
apprezzata dagli stakeholder), un link rapido ai contatti, la ricerca e le classiche bandierine della lingua per le versioni
italiana ed inglese.
Il menù realizzato, tramite semplici link, fa riferimento alle tre missioni dell’Ateneo (didattica, ricerca e trasferimento
tecnologico) e un punto rapido d’accesso ai siti dei dipartimenti.
Nel footer sono previsti svariati collegamenti. In particolare, sotto la voce “Sito Web istituzionale” sono stati
raggruppati tutti i contenuti che devono essere presenti obbligatoriamente in un sito Web istituzionale, come l’Albo
online, l’amministrazione trasparente, etc., che non necessariamente servono a tutti i visitatori.
Sotto la voce “Credits” sono state inserite le informazioni sull’approccio adottato per la realizzazione del sito stesso,
e le redazioni che gestiscono i vari siti universitari. In questa sezione è presente una voce per le linee di guida da seguire
da parte degli addetti, per la realizzazione dei contenuti da pubblicare sul portale.
La parte centrale della home page prevede una struttura a tile orientata verso gli utenti esterni. In particolare, si è
optato per dare più importanza ai futuri studenti. Per essi si è pensato di evidenziare maggiormente la voce “Studiare alla
Mediterranea”, dove l’utente può trovare tutti i vantaggi per cui iscriversi alla Mediterranea e le informazioni su come
iniziare. La seconda voce messa in risalto è “Storie di successo”. Essa dà risalto agli ex studenti che, al termine degli studi,
sono riusciti a raggiungere traguardi di prestigio e possono diventare un esempio o un punto di arrivo per gli altri.
Sempre orientato agli utenti visitatori è stata prevista una voce dove si può consultare il messaggio di benvenuto del
Rettore. Un ulteriore tile presente è “Riconoscimenti” cliccando sul quale le persone possono visualizzare tutti i premi e
gli elogi che docenti e studenti dell’Ateneo hanno ricevuto nel corso del tempo.
La voce “About Medittanea” contiene tutte le informazioni relative all’Ateneo.
Demetrio Siclari
81
Progettazione dei wireframe
Il tile “Offerta formativa” è un collegamento alla voce “Didattica”. Potrebbe sembrare superfluo per via della voce già
presente nel menù, ma durante le interviste, è emerso che i ragazzi provenienti dalla superiori trovavano più intuitiva la
voce “offerta formativa”, mentre gli studenti iscritti preferivano di gran lunga la voce “Didattica”.
Gli altri due tile sono pensati per due utenti esterni, ovvero lo studente internazionale e gli enti e le aziende.
Figura 5.5 - Wireframe relativo alla home page
82
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Le pagine di primo livello
Sullo stile della home page sono state realizzate le pagine di primo livello. Esse ripercorrono la struttura a tile ed
aggiungono informazioni mirate a seconda della pagina. Ad esempio, nella pagina relativa agli studenti sono proposte le
news e gli avvisi dedicati nonché le informazioni relative al centro sportivo universitario, alle attività culturali e quelle
ricreative. Nelle Figure Figura 5.6 …Figura 5.13 vengono riportati alcuni wireframe delle pagine di primo livello:
Figura 5.6 – Wireframe della pagina relativa agli studenti
Demetrio Siclari
83
Progettazione dei wireframe
Figura 5.7 – Wireframe della pagina relativa ai docenti
84
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 5.8 – Wireframe della pagina relativa al Personale Tecnico Amministrativo
Demetrio Siclari
85
Progettazione dei wireframe
Figura 5.9 – Wireframe della pagina relativo al laureando o laureato
86
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 5.10 – Wireframe della pagina relativa alle imprese e agli enti
Demetrio Siclari
87
Progettazione dei wireframe
Figura 5.11 – Wireframe della pagina relativa allo studente internazionale
88
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 5.12 – Wireframe della pagina “Trasferimento Tecnologico”
Demetrio Siclari
89
Progettazione dei wireframe
Figura 5.13 –Wireframe della pagina “Ricerca”
90
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Wireframe di alcune pagine specifiche
Per alcune pagine si è avuta la necessità di inserire degli elementi particolari. Una di queste pagine è stata quella
relativa alla rubrica. In questa pagina è stato previsto un layout particolare in cui il personale viene suddiviso e
raggruppato in sezioni distinte fra loro sulla base delle iniziali del cognome. Tramite un sistema a tab e anchor link è
possibile raggiungere la lettera desiderata oppure sfruttare il meccanismo di ricerca iniziale. In Figura 5.14 viene mostrato
il wireframe della pagina relativa alla rubrica.
Nella pagina didattica, oltre alla struttura a tile è stato pensato un sistema di ricerca dei corsi per permettere l’accesso
immediato alla scheda dell’insegnamento da parte dell’utente che conosce già il corso specifico che sta ricercando. La
tabella dei corsi è pensata per essere ordinabile a seconda del campo scelto. In Figura 5.15 viene mostrato il wireframe
relativo alla pagina della didattica.
Nelle pagine che gestiscono i corsi di laurea è stato pensato un sistema a doppio accordion (fisarmonica) che
permetta, dopo una prima espansione, di visualizzare i corsi erogati da un singolo dipartimento. Il secondo accordion
permette di accedere alle informazioni del singolo corso come il piano didattico, il regolamento didattico e le statistiche
di Almalaurea (Figura 5.16).
La pagina laboratori, sotto la voce “ricerca”, contiene l’elenco dei laboratori presenti presso l’Ateneo. Per accedere
facilmente alle informazioni è stato pensato un cerca con la possibilità di filtrare i risultati per dipartimento. Per ciascun
laboratorio vengono visualizzati il logo, il nome ed una breve descrizione. In Figura 5.17 viene mostrato il mockup relativo
alla pagina dei laboratori.
Nelle Figura 5.18 e Figura 5.19 sono riportati i wireframe relativi all’elenco delle storie di successo e alla singola storia
di successo. In queste pagine si è deciso di dare molta importanza alla persona, al traguardo raggiunto e all’azienda in cui
lavora. Per rendere più simpatica ed attuale la sezione è stato previsto un messaggio breve, denominato tweet, della
persona verso i lettori. Nell’elenco delle storie di successo è stato pensato, come per i laboratori, un filtraggio per i
dipartimenti.
La singola storia metterà in risalto la persona, con la foto ben in vista ed il traguardo raggiunto. In una struttura a tab
verranno inserite le informazioni, come la biografia e il contributo che ha avuto la Mediterranea nel raggiungimento del
traguardo.
Demetrio Siclari
91
Progettazione dei wireframe
Figura 5.14 -Wireframe relativo alla rubrica
92
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 5.15 – Wireframe relativo alla pagina “Didattica”
Demetrio Siclari
93
Progettazione dei wireframe
Figura 5.16 – Wireframe relativo alla pagina dei corsi di laurea triennale
94
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 5.17 - Wireframe relativo alla pagina dei laboratori
Demetrio Siclari
95
Progettazione dei wireframe
Figura 5.18 – Wireframe relativo alle storie di successo
96
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 5.19 – Wireframe relativo ad una singola storia di successo.
Demetrio Siclari
97
Progettazione dei wireframe
98
Demetrio Siclari
Capitolo 6
Scelta del CMS del tema e dei plug-in
Negli ultimi anni l’utilizzo dei CMS sta aumentando notevolmente grazie alla flessibilità e alla semplificazione delle operazioni
di gestione garantita da tali sistemi. Queste piattaforme semplificano notevolmente il lavoro di costruzione dei siti Web
riducendo i costi operativi e assicurando scalabilità e performance avanzate. In questo capitolo analizzeremo i CMS più diffusi
ed individueremo quello più adatto da utilizzare per il nuovo portale di Ateneo e quali temi e plug-in risultano essere i più idonei
per il nostro scopo.
Scelta del CMS del tema e dei plug-in
Introduzione
Un CMS (Content Management System) è un sistema di gestione dei contenuti che fornisce uno strumento software
per facilitare la gestione di un sito Web. Esso permette di amministrare un sito Web senza, necessariamente, aver bisogno
di conoscenze tecniche particolari di programmazione Web.
Esistono CMS appositamente progettati per precisi contenuti (blog, forum, riviste, e-commerce, etc.) e CMS più
generici e flessibili, che permettono di gestire diversi tipi di contenuti grazie all’impiego di estensioni.
A livello tecnico un CMS si appoggia su un DBMS per la memorizzazione dei dati; l’applicazione software costruita
tramite CMS è suddivisa in due parti principali:
back end, una sezione di amministrazione che serve ad organizzare e supervisionare la produzione dei
contenuti;
front end, una sezione applicativa che l’utente sfrutta per la fruizione dei contenuti e dei servizi del sito.
I CMS possono essere realizzati tramite vari linguaggi di programmazione; tra i più diffusi ci sono ASP, PHP e
Microsoft .NET.
Grazie ai CMS realizzare oggigiorno un sito è diventata un’operazione a portata di tutti ed, infatti, la percentuale di
siti Web realizzati tramite CSM aumenta sempre più.
A maggio 2013 BuiltWith® ha stimato che quasi quindici milioni di siti Web su Internet sono realizzati con Wordpress,
che rappresenta il CMS più diffuso. In Figura 6.1 è riportato il grafico d’uso relativo ai vari CMS adoperati.
Figura 6.1 - Statistiche sull'uso dei CMS
In seguito analizzeremo i tre CMS più utilizzati per capirne i pro e i contro. Spesso la scelta del CMS da utilizzare viene
fatta in base agli skill del webmaster, senza tenere in minima considerazione le esigenze del cliente. Nella progettazione,
invece, va scelto accuratamente il CMS più adatto da utilizzare in base alle esigenze di progetto e agli eventuali sviluppi
futuri. Considerando i CMS più diffusi, Drupal, Joomla e Wordpress, analizzeremo alcune variabili che potrebbero
influenzare la scelta finale. Tali variabili sono:
100
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
conoscenza della piattaforma;
conoscenza delle soluzioni dedicate al singolo CMS (estensioni, plug-in, etc.);
release e supporto futuro del CMS;
disponibilità di estensioni;
facilità di integrazione fra le varie estensioni;
possibilità e capacità di intervenire sul codice;
possibili controindicazioni (esempio SEO);
eventuali costi di licenze del CMS e/o delle estensioni;
robustezza del sistema.
Wordpress
Questo CMS è focalizzato sull’estetica, sull’usabilità e sugli standard Web che le pagine devono possedere. Si è diffuso
in maniera esponenziale grazie alla sua semplicità (si installa in cinque minuti), al suo continuo supporto e alla
disponibilità di moltissimi plug-in che ne estendono le funzionalità. La curva di apprendimento è molto bassa, con minimi
sforzi e, a volte, senza toccare alcuna riga di codice si riesce ad ottenere un buon risultato finale. L’enorme diffusione di
Wordpress permette di trovare in rete moltissimi tutorial e guide su questa piattaforma.
La facilità di personalizzazione rende Wordpress ideale sia per piccoli progetti che per progetti più strutturati e
complessi. Molte aziende o grandi brand si appoggiano su piattaforma Wordpress.
Alcuni esempi di siti famosi realizzati con questa piattaforma sono “Il New York Times, la CNN, Sony Playstation, la
parte delle news dei siti di Ford, Samsung e General Motors, il sito dei Rolling Stones, e la lista potrebbe continuare quasi
all’infinito.
La gestione piuttosto rigida degli utenti, sebbene esistano molti componenti aggiuntivi a riguardo, non è delle
migliori. Per progetti di dimensioni abbastanza grandi il sistema non è molto scalabile a meno che non si conoscano nel
dettaglio le sue funzionalità ed il linguaggio di programmazione.
Molto utile e semplice la gestione delle tassonomie, che permette di realizzare classificazioni per ordinare e gestire
al meglio i diversi contenuti. Tramite l’uso di tassonomie personalizzate è possibile raggruppare e gestire diversamente i
contenuti, offrendo funzionalità maggiori rispetto a quella della gestione di base.
Joomla!
Nato da una scissione dal famoso CMS Mambo, Joomla! è, attualmente, in rapido sviluppo ed integra, di base, molte
funzionalità per l’amministrazione e la gestione di un progetto Web. Tuttavia, la configurazione di Joomla non è semplice
e la curva di apprendimento non risulta così buona come quella di Wordpress. Di base offre una buona gestione dei menù,
dei moduli, della struttura del sito e dei contenuti all’interno di essa. Muoversi all’interno delle tante opzioni messe a
disposizione da Joomla! può risultare abbastanza difficoltoso. Nonostante ciò questa piattaforma permette di creare
strutture più flessibili rispetto a Wordpress a patto, però, di sacrificare la facilità e l’intuitività d’uso.
Esistono molte estensioni in Joomla! (non quante ne possiamo trovare in Wordpress) in grado di soddisfare le varie
esigenze, ma le personalizzazioni sono spesso difficili così come le integrazioni fra più estensioni. Il supporto delle varie
estensioni di Joomla! non è efficace ed immediato come per Wordpress e sono noti i problemi, soprattutto di sicurezza,
delle prime versioni, poi sistemati con le versioni successive. Alcuni siti famosi realizzati in Joomla! sono Linux.com, Mtv,
Pegeout.com etc.
La Versione 3.X di Joomla! ha fatto notevoli passi avanti, ma non sempre è garantita la compatibilità con le vecchie
estensioni e, attualmente, sono pochi i moduli aggiuntivi gratuiti per la nuova versione.
Le personalizzazioni, sia quelle semplici che quelle più complesse, non sono banali, ma necessitano di approfondite
conoscenze del CMS e del framework di base T3.
Demetrio Siclari
101
Scelta del CMS del tema e dei plug-in
Drupal
Dei tre CMS presi in considerazione questo è, sicuramente, quello che richiede maggiori competenze. È uno
strumento molto potente per creare portali complessi e di grandi dimensioni, ma richiede abilità ed esperienze specifiche.
Il processo di installazione non è impegnativo, ma le configurazioni post-installazione risultano ardue a chiunque non si
sia già confrontato con questo CMS. La curva di apprendimento di questa piattaforma risulta veramente ripida.
Rispetto ai due CMS analizzati in precedenza, Drupal è orientato maggiormente ad essere un framework di sviluppo
che uno strumento e, quindi, richiede maggiore sforzo e conoscenza di programmazione.
Drupal possiede un’ottima gestione dei contenuti riuscendo, di base, a supportare sino a sette tipi diversi di contenuti
(articoli, blog, gallerie immagini, forum, dowload ed upload di media, newsletter e aggregatori di notizie). Alcuni portali
realizzati in Drupal sono WhiteHouse, Zynga, Ikea, etc.
Drupal non è, probabilmente, la scelta migliore per sistemi in cui ci siano molti attori, con ruoli e responsabilità diverse
sui contenuti, a causa di una gestione degli autori completa, ma davvero complicata da configurare.
La scelta del CMS e del tema di base
Per la realizzazione del nuovo portale di Ateneo si è deciso di optare per una piattaforma semplice da gestire e
fortemente personalizzabile “a pennello” tramite l’uso di plug-in o integrazioni. Una delle necessità principali, infatti, è
stata quella di scegliere il CMS che maggiormente permetteva il riutilizzo delle funzionalità e dei servizi già presenti
sull’attuale sito. Funzionalità frutto di dieci anni di servizio che non devono essere dismesse, ma valorizzate e migliorate
in termini di UX design.
La scelta è ricaduta sul CMS Wordpress, facilmente amministrabile da chiunque, soprattutto in futuro per i
dipendenti, e con un supporto davvero formidabile di estensioni, temi e tutorial.
La semplicità di questa piattaforma è, sicuramente, il suo punto forte, che ha permesso “la costruzione” del nuovo
portale di Ateneo partendo da una base snella e fluida, da arricchire esclusivamente con le funzionalità richieste.
A valorizzare la scelta di Wordpress è stata anche l’individuazione di alcuni plug-in utili a soddisfare le richieste di
progettazione garantendo, al tempo stesso, un’ottima intuitività e semplicità d’uso agli utilizzatori finali. L’ampio
supporto messo a disposizione da Wordpress, inoltre, permette facilmente anche di realizzare da zero dei plug-in ad hoc
per rendere il lavoro di sviluppo quanto più scalabile e modulare possibile.
Una volta scelto il CMS da utilizzare, si è passati alla ricerca del tema più adatto alle esigenze del nuovo portale di
Ateneo. Dopo un’attenta valutazione, si è optato per “Polytechnic Theme” (Figura 6.2), un tema specifico a pagamento
per Università e college, che prevede già una struttura a tile.
Il tema offre
un pannello d’accesso ad espansione alle news dell’area di top hat, ovvero la parte superiore del sito, utile
per la profilazione degli utenti;
una grafica intuitiva, semplice ma, al tempo stesso accattivante;
un gestore degli eventi molto potente e flessibile;
una struttura grafica per la gestione degli elenchi dei corsi e del personale docente;
un menu a comparsa all’hover (passaggio del mouse) graficamente molto elegante ed efficace.
Il tema comprende al proprio interno alcuni plug-in extra a pagamento molto utili che verranno, descritti in dettaglio
nel seguito.
La gestione “responsive” è stata testata con ottimi risultati su svariati dispositivi e browser, e prevede il supporto per
schermi di ogni tipo dal “piccolo” smartphone al PC ad alta definizione.
102
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 6.2 - Polytechinic Theme
Scelta dei plugin
Per Wordpress esistono migliaia di plug-in che permettono di estendere le funzionalità di base offerte dalla
piattaforma, garantendo un’ampia personalizzazione. Un plug-in non è altro che un componente che viene aggiunto per
modificare o estendere funzionalità. Come dei piccoli frammenti, i plug-in sono porzioni di codice specifici che gestiscono
alcune funzionalità. Essi possono essere aggiunti facilmente in Wordpress, ed ogni estensione può essere modificata
interamente dagli sviluppatori.
I plug-in sono scaricabili tramite il repository ufficiale di Wordpress, alcuni in maniera gratuita altri e a pagamento e,
spesso, sono ben supportati con rilasci regolari che ne potenziano le funzionalità o risolvono eventuali bug.
Per la gestione del nuovo portale di Ateneo sono stati individuati alcuni plug-in utili, sia lato back-end che lato frontend. Nel seguito diamo uno sguardo ai principali tra questi.
WPBakery Visual Composer
Plug-in ricco che permette, in maniera semplice ed intuitiva, la gestione dei layout delle pagine in maniera avanzata
e professionale. Esso consente di strutturare la pagina come meglio si crede e di inserire elementi grafici o funzionali,
come slider, immagini, elenchi degli articoli, mappe, etc. Offre un’ampia personalizzazione della disposizione dei
contenuti.
In Figura 6.3 sono visibili tutti i contenuti gestibili tramite Visual Composer.
Role scoper
Permette di gestire i permessi in maniera semplice estendendo la gestione base di Wordpress. In particolare,
consente di creare nuovi gruppi di ruolo, di limitare le operazioni di lettura/scrittura sui singoli articoli, sulle singole pagine
e sulle singole categorie di articoli.
Demetrio Siclari
103
Scelta del CMS del tema e dei plug-in
WPFront User Role Editor
Questo plug-in permette di creare e modificare i ruoli preesistenti in Wordpress per ottimizzare la loro gestione.
Usato assieme a Role Scoper, permette la gestione completa delle varie responsabilità e dei permessi sul sito Web.
The Events Calendar
Permette di gestire articoli di tipo “tribe_event” tramite le tassonomie estendendo l’articolo base mediante campi
aggiuntivi, in grado di gestire al meglio gli eventi. In particolare, associa ad un articolo delle voci come la data di inizio e
fine, la località, l’organizzatore, l’eventuale costo, etc., offrendo una grafica di front-end funzionale, con la possibilità di
condividere o esportare facilmente gli eventi.
Figura 6.3 - Contenuti inseribili tramite Visual Composer
WPML Multilingual CMS
Plug-in professionale per la gestione dei contenuti multilingua del sito Web. Agevola l’inserimento dei contenuti
multilingua. Inoltre offre un potente strumento di traduzione e sincronizzazione fra menù, widget ed altri contenuti delle
pagine. Esteso tramite gli add-on “WPML String Translation” e “WPML Translation Management” consente di avere il
pieno controllo dei contenuti presenti nel sito e di gestirne il multilingua.
Max Mega Menu
Permette di creare, facilmente, menù a tendina complessi, con la possibilità di aggiungere, al loro interno, elementi
semplici o complessi, come widget o voci di menù.
Add_content
Plug-in personalizzato, creato su misura per il nuovo sito di Ateneo, che permette di inserire testi (o anche codice
PHP) in alto alla destra del titolo di una pagina. Utile, ad esempio, per la pubblicazione dei contatti di un ufficio o per
l’inserimento di pulsanti rapidi.
104
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
MyPlugin
Plug-in personalizzato, creato ah hoc per il nuovo portale di Ateneo, permette l’inserimento rapido degli elenchi degli
ultimi articoli pubblicati sotto una specifica categoria scegliendo se strutturare le informazioni sotto una o due colonne.
Offre la possibilità, ad esempio, di pubblicare la lista delle ultime news ed eventi nella home page.
Icone_menu
Plug-in personalizzato, creato appositamente per il nuovo portale di Ateneo, che permette di inserire, nella parte alta
del contenuto della pagina, prima del titolo, un apposito menù formato da immagini tonde o icone, per collegare le pagine
dello stesso livello.
Dynamic To Top
Semplice plug-in che aggiunge un pulsante denominato “to top”, per raggiungere la parte superiore della pagina
dopo lo scroll; è possibile scegliere fra vari temi (ad esempio scritta oppure freccia verso l’alto).
Ajaxy Live Search
Permette di integrare in modo semplice un sistema di ricerca raffinato all’interno delle pagine e dei post. Integra
svariati temi e layout per adattarsi al meglio ai vari template.
CMS Tree Page View
Questo plug-in mostra le pagine del sito, nell’area back-end, con una struttura ad albero compatta. Rappresenta una
utile soluzione all’aumentare del numero delle pagine presenti sul portale.
Responsive Menu
Permette di aggiungere un menù adatto per la visualizzazione su dispositivi portatili. Si attiva per risoluzioni inferiori
a 720px ed offre un’esperienza di navigazione migliore per gli utenti mobile.
In Figura 6.4 il menù responsive aggiunto, nel particolare, tramite questo plug-in.
Figura 6.4 - Responsive Menù espanso
Demetrio Siclari
105
Scelta del CMS del tema e dei plug-in
106
Demetrio Siclari
Implementazione delle pagine di base
In questo capitolo si mostrerà come è semplice utilizzare Wordpress per implementare un sito Web. In particolare, verrà
spiegato quali sono i file principali da gestire e si realizzerà un modello ad hoc per soddisfare le varie necessità. In particolare,
si vedrà come sono state gestite le varie pagine di base del nuovo portale di Ateneo.
Implementazione delle pagine di base
Introduzione
Wordpress è orientato alle singole pagine e, quindi, è legato al tema adoperato. Ogni tema dispone di un file
style.css, obbligatorio, e di un file function.php, necessario qualora si debbano aggiungere funzionalità al core
del CMS.
Il file style.css
Rappresenta molto più di un semplice foglio di stile; infatti, nell’intestazione fornisce a Wordpress tutte le
informazioni per gestire il tema. I metadati che compongono l’intestazione del file vengono chiamati “header-name”
ed è importante che ogni coppia nome/valore sia collocata su un rigo singolo e separata dal simbolo dei due punti. I valori
da inserire sono, ad esempio, l’autore, la descrizione del tema, il percorso del tema, la versione, il nome del tema (deve
essere unico all’interno della directory dei temi) ed eventuali tag. Nel Listato 7.1 viene mostrata l’intestazione del tema
Polytechnic adoperato.
1
2
3
4
5
6
7
8
9
10
11
12
/*
13
Tags: education, school, college, university, faculty, classes, courses, course management, catalog,
skeleton, customizable, woocommerce, events calendar
14
15
Theme Name: Polytechnic
Theme URI: http://themeisland.net/
Author: Charles Jones (ThemeIsland)
Author URI: http://themeisland.net/
Description: Ultimate Education WordPress Theme
Version: 1.0.5
License: GNU General Public License
License URI: license.txt
Text Domain: mythology
Domain Path: /languages/
*/
Listato 7.1 - Intestazione del file style.css relativo al tema Polytechnic
Il file function.php
Anche se non strettamente necessario, il file function.php è presente ormai nella quasi totalità dei temi. Questo
file permette di estendere le funzionalità di base di Wordpress con quelle che spesso vengono introdotte tramite l’uso di
plug-in. Il file, inoltre, consente di attivare tutte le funzionalità specifiche per il tema adoperato. Ecco perché è importante
valutare a priori la compatibilità del tema adoperato con i plug-in scelti da utilizzare. Nel function.php è possibile, ad
esempio, configurare nuove sidebar che rappresentano le aree destinate ai widget.
Il child theme
Un child theme (o “tema figlio”) di Wordpress è un tema che eredita le funzionalità di un altro tema, generalmente
chiamato “tema padre”. Il tema figlio rappresenta il modo più semplice e sicuro per applicare delle personalizzazioni ad
un tema. Esso permette di aggiungere o modificare alcune funzionalità o aspetti del tema senza sovrascrivere
direttamente i file originali (rischiando, così, di non poter più tornare indietro dalle modifiche effettuate).
L’aspetto più importante del tema figlio sta nel fatto che permette di applicare modifiche ad un tema senza rischiare
che al primo aggiornamento del tema stesso (l’aggiornamento sostituisce i file vecchi con i nuovi) si perdano tutte le
personalizzazioni applicate.
Un tema figlio, inoltre, aiuta a comprendere meglio la gerarchia dei file del tema, facilitando la fase di sviluppo
personalizzata.
108
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Creare un tema figlio è un’operazione abbastanza semplice. Basta aggiungere nella cartella dei temi di Wordpress
(../wp-content/themes) una nuova directory con all’interno un file style.css adeguatamente configurato. In
particolare vanno specificati gli header-name “Theme Name” per assegnare un nome al tema figlio (generalmente si usa
lo stesso nome del tema padre col suffisso _child), e “Template”, per indicare a Wordpress la directory del tema
padre; è importante stare attenti al case sensitive. Gli altri valori sono opzionali, ma possono essere usati come
riferimento dallo sviluppatore per inserire informazioni utili ai futuri programmatori.
Dopo l’intestazione è necessario importare il foglio di stile del tema padre tramite il media query @import. Nel
Listato 7.2 viene riportata l’intestazione usata per il template figlio.
1
2
3
4
5
6
7
8
9
10
/*
Theme Name:
Author:
Description:
Version:
Template:
*/
Polytechnic Child
Demetrio Siclari
Università Mediterranea di Reggio Calabria
1.0.0
polytechnic
@import url("../polytechnic/style.css");
Listato 7.2 - Intestazione style.css del template figlio
Se è necessario modificare o estendere le funzionalità core di Wordpress o del tema padre anche sul tema figlio è
possibile inserire il file function.php.
Dal back end di Wordpress basta attivare il tema figlio dalla voce “Aspetto -> Temi”, verranno, a questo punto,
caricate tutte le regole scritte per il figlio più quelle del tema padre. In particolare per le regole con lo stesso nome, quelle
scritte nel tema figlio avranno precedenza sulle equivalenti del tema padre, sovrascrivendole.
Modello UnircTemplate
Worpress prevede la possibilità di associare a ciascuna pagina un template differente chiamato, solitamente,
modello. Un modello non è altro che una pagina PHP che richiama le funzionalità, il layout ed i contenuti di una pagina di
un sito Web. I temi, in Wordpress, suddividono, generalmente, gli elementi di una pagina in quattro parti principali:
Header.php; contiene le intestazioni della pagina e la parte superiore del layout che generalmente rimane
fissa in ogni pagina.
Page.php; in essa si trova il contenuto vero e proprio della pagina, memorizzato lato back- end; può essere
anche ampliato o esteso con alcune funzionalità. È, forse, il file più importante dei quattro, poiché, tramite la
gestione del back-end, è possibile associarlo a tutte e/o alle pagine d’interesse richiamando al suo interno, gli
altri elementi.
Sidebar.php; permette, qualora sia prevista una colonna laterale, di inserire elementi, come widget o altri
contenuti, all’interno delle pagine dove viene richiamata.
Footer.php; racchiude tutti gli elementi posizionati al di sotto dei contenuti e che generalmente rimangono
invariati in tutte le pagine.
Per la realizzazione del modello di base del nuovo portale di Ateneo sono stati personalizzati, nel tema figlio, i file
header.php e footer.php per aggiungere le funzionalità e l’aspetto grafico voluti. Questi file vengono inclusi in ogni
modello personalizzato, realizzato per mantenere identico lo stile in ogni pagina del sito. Operando sul codice HTML e
CSS è stato possibile riprodurre la struttura ideata nei wireframe, in fase di progettazione, gestendo al meglio la
compatibilità con i vari dispositivi ed i vari browser.
Il modello di base per la pagina, invece, varia a seconda delle necessità. Per ogni pagina di tipo “statica”, ovvero che
preleva soltanto le informazioni inserite lato back end di Wordpress, è stato realizzato un apposito modello denominato
“UnircTemplate” a cui è associata la pagina PHP UnircTemplate.php.
Demetrio Siclari
109
Implementazione delle pagine di base
Per far associare una pagina PHP ad un modello, in Wordpress basta semplicemente aggiungere, all’intestazione del
file PHP, uno specifico commento, come mostrato nel Listato 7.3.
Questo modello rappresenta anche la base di tutte le pagine specifiche create per il nuovo portale di Ateneo,esso
richiama, oltre ai contenuti, i plug-in personalizzati realizzati appositamente per il sito. Nel Listato 7.4 viene mostrato il
modello base di tutte le pagine del nuovo portale di Ateneo.
1
2
3
<?php
/* Template Name: UNIRCTemplate */
?>
Listato 7.3 - Stringa per associare un file PHP ad un modello in Wordpress
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
/* Template Name: UNIRCTemplate */
?>
<?php get_header(); ?>
23
24
25
26
27
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<div id="primary" class="<?php echo esc_attr( $myth_primary_layout_classes ); ?>">
<main id="main" class="site-main " role="main">
<?php while
( have_posts() ) : the_post(); ?>
<?php echo $post_ID;?>
//Carica le parti personalizzate per la pagina come i plug-in Add_Content e Icone_Menu
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop.?>
<?php
//Carica MyPlugin per la gestione News ed eventi
get_partitemplate($slug='eventi&news'); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
comments_template();
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number())
comments_template(); ?>
Listato 7.4 - Modello di base di tutte le pagine del nuovo sito di Ateneo
Il risultato finale, anche se il design grafico è ancora in fase di raffinamento, è mostrato nelle Figura 7.1…Figura 7.4.
Tutte e quattro gli esempi sono gestiti con il modello di base “UnircTemplate”. Grazie ai plug-in attivabili
dinamicamente su ogni pagina, si riesce a soddisfare tutte le esigenze previste in fase di progettazione.
Le pagine sono state realizzate tenendo bene a mente i concetti di UX design e garantendo la massima usabilità del
sito anche navigando dai dispositivi più piccoli.
In Figura 7.5 viene mostrato, ad esempio, come viene visualizzato il menù del plug-in “Icone-menu”, evidenziato
nella Figura 7.4, quando il sito viene visualizzato da uno smartphone. Il tutto è gestito sfruttando CSS3 e, quindi, senza
pesare sull’accessibilità del sito stesso. Il menù è realizzato tramite il plug-in personalizzato “Icone_menu” che permette
di associare un’immagine ad una pagina ed, in automatico, gestisce il front end. In particolare, il plug-in, oltre a creare la
struttura responsive, gestisce l’”active”, colorando opportunamente l’immagine relativa alla voce di menù della
pagina visualizzata. Per le voci di menù delle pagine interne del portale si è deciso di utilizzare delle icone in stile
Windows 8 metro style.
110
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 7.1 - Home page del nuovo sito di Ateneo
Demetrio Siclari
111
Implementazione delle pagine di base
Figura 7.2 – La pagina "Studiare alla Mediterranea"
112
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 7.3 – Esempio di pagina interna del portale
Demetrio Siclari
113
Implementazione delle pagine di base
Figura 7.4 - Esempio di pagina interna del portale con il plug-in Add-contact attivo
114
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 7.5 - Menu select option per accedere al menù da mobile
Demetrio Siclari
115
Implementazione delle pagine di base
116
Demetrio Siclari
Implementazione delle parti avanzate
Per la gestione delle parti specifiche, il modello di base, visto in precedenza, da solo non basta più e serve implementare
funzionalità avanzate in base alle varie esigenze. In questo capitolo vedremo come Wordpress snellisce la scrittura del codice
semplificando alcuni aspetti, come l’accesso al database, e ci focalizzeremo sull’implementazione della gestione dei laboratori
e dell’amministrazione centrale.
Implementazione delle parti avanzate
Introduzione
Per gestire le parti più personalizzate del nuovo sito di Ateneo è necessario creare degli appositi modelli per gestire
le funzionalità particolari.
Wordpress permette di arricchire facilmente le funzionalità di base attraverso codice puro e/o l’integrazione con
database già esistenti. Ad agevolare lo sviluppo, Wordpress offre una molteplicità di funzioni pronte da utilizzare, a
seconda dei casi, e catalogate all’interno del manuale online https://codex.wordpress.org/.
A seconda delle necessità, quindi, si è dovuto estendere il modello di base realizzato, UnircTemplate, con
funzionalità specifiche per la sezione da realizzare. È stato necessario interagire col database già esistente dell’attuale
sito di Ateneo. Vista l’enorme mole di informazioni contenute sul tale database, alcune non più necessarie o ridondanti,
si è optato nel riportare, all’interno del database di Wordpress, solo i dati necessari alle elaborazioni.
È stato necessario, quindi, effettuare anche un lavoro di ristrutturazione e ripulitura dei dati, ove possibile. In Figura
8.1 viene riportato il modello E/R delle parti principali dell’attuale database di Ateneo.
Ogni modifica applicata alla struttura dati è stata concordata col Servizio Autonomo per l’Informatica di Ateneo
(SIAt), ei dati sono stati importati tramite opportuni script SQL che permetteranno, una volta dismesso l’attuale sito di
Ateneo, la migrazione completa di tutti i dati utili per l’Università.
Per interfacciarsi con i dati memorizzati sul database, la piattaforma mette a disposizione la classe “wpdb” che
contiene un insieme di funzioni per interagire con una base dei dati anche esterna. Per utilizzare la classe basta richiamare
la variabile globale “$wpdb” ed usare i metodi messi a disposizione. Nel Listato 8.1 viene riportato un esempio d’uso
della classe wpdb. Tramite il metodo get_result() della classe, è possibile effettuare un’interrogazione al database
e prelevare i risultati della query inserendoli in un array di oggetti. Ogni riga del vettore corrisponde ad una tupla e ogni
elemento della riga corrisponde al campo prelevato da database. Utilizzando successivamente un ciclo sarà possibile
scorrere i risultati dell’interrogazione ed elaborare le informazioni.
1
2
3
<?php
global $wpdb;
$result = $wpdb->get_result(‘SELECT * FROM tabella’);
?>
Listato 8.1 - Esempio d'uso della variabile globale $wpdb per l'accesso al database
Nelle sezioni successive analizzeremo qualche esempio di pagina specifica realizzata; in particolare vedremo come
funziona la gestione delle pagine dei laboratori e dell’amministrazione centrale.
118
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 8.1 - Modello E/R delle parti principali del database dell'attuale sito di Ateneo
Demetrio Siclari
119
Implementazione delle parti avanzate
Gestione dei laboratori
La Mediterranea ha sempre posto molta attenzione alla ricerca ed è, infatti, una delle poche Università che valorizza
i suoi laboratori e le loro attività, dedicando a questi un ampio spazio sul portale di Ateneo.
Le informazioni relative ai laboratori sono memorizzate nella tabella laboratorio_ricerca. Tale tabella è
collegata ad altre entità considerando che:
il laboratorio può avere uno o più SSD;
il laboratorio appartiene ad una struttura;
il laboratorio può avere una o più unità di ricerca;
il laboratorio ha un coordinatore;
il laboratorio ha uno o più responsabili tecnici;
il laboratorio ha associate diverse persone con ruoli diversi;
al laboratorio possono essere associati uno o più progetti di ricerca.
L’attuale sistema informatico non prevede grossi vincoli per la gestione dei dati dei laboratori. I campi sono, per lo
più, testuali e, nel corso del tempo, per inserire maggiori informazioni sui laboratori i dati sono stati concatenati
all’interno dello stesso campo tramite un separatore.
Per gestire al meglio i dati memorizzati sul database, la nuova tabella che gestisce i laboratori ha vincoli maggiori
tramite le chiavi referenziali. Per poter trasferire i dati nelle nuove tabelle è stato necessario realizzare degli opportuni
script PHP che, eseguendo specifiche operazioni di “splitting” delle stringhe, hanno popolato adeguatamente le nuove
entità.
La pagina dei laboratori creata, che contiene l’elenco di tutti i laboratori attivi preso l’Ateneo, è associata, tramite
back end di Wordpress, al modello personalizzato Laboratori descritto nel file laboratori.php.
La pagina è in grado di gestire, in maniera dinamica, tutte le informazioni relative ai laboratori, presi come insieme,
e al singolo laboratorio. Al fine di implementare la corretta visualizzazione dei dati in base alla lingua scelta, è stato
realizzato un dizionario per la lingua italiana ed uno per la lingua inglese. I metodi usati si integrano alla perfezione col
plug-in WPML, che viene sfruttato per prelevare uno o l’altro dizionario. In particolare è stato sfruttato il fatto che il plugin
WPML aggiunge negli URL delle pagine un opportuno prefisso a seconda della lingua scelta per navigare il sito. In base,
quindi, al valore posto negli URL è possibile capire la lingua utilizzata per navigare le pagine del portale. Tramite una
funzione che preleva l’URL della pagina è possibile automaticamente prelevare le informazioni dal database per i campi
previsti in multilingua.
Per rendere la consultazione della lista più accattivante è stato previsto di visualizzare, oltre al nome del laboratorio,
l’eventuale logo, il sottotitolo e una breve anteprima delle finalità del laboratorio stesso. A rendere più semplice e snella
la consultazione della pagina sono stati previsti anche un modulo di ricerca e la possibilità di filtrare la lista a seconda del
dipartimento d’interesse. In Figura 8.2 è visibile la pagina dei laboratori, accessibile dalla voce “ricerca” del sito. Per
migliorare l’esperienza utente si è integrato il modulo di ricerca e di filtraggio di un pezzo di codice JQuery che permette
l’interattività delle operazioni. In particolare, il codice JQuery è in grado di individuare alcuni eventi, come il click su tab o
la digitazione di dati all’interno del campo input. In base all’evento, invia un’opportuna richiesta asincrona AJAX al server,
garantendo la massima trasparenza all’utente. Per questioni di accessibilità le funzionalità di ricerca sono usufruibili
anche dagli utenti che non utilizzano i JavaScript tramite una classica form di ricerca. Essa richiede il ricaricamento della
pagina per l’invio in get delle parole chiave utilizzate.
120
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 8.2 - Pagina dei laboratori
Per nascondere la classica form con i JavaScript abilitati, si è utilizzata la porzione di codice JQuery visibile nel Listato
8.2. Esso associa al submit la proprietà CSS display:none che nasconde il pulsante di ricerca, porta la larghezza del
campo di input al cento per cento della pagina e cattura l’evento submit (la pressione del tasto invio) per inviare il valore
tramite AJAX.
Demetrio Siclari
121
Implementazione delle parti avanzate
49
50
51
52
53
54
jQuery(document).ready(function(){
jQuery('input.course-search-button.two.columns.omega').css('display','none');
jQuery('input.course-search-field.fourteen.columns.alpha').css('width','100%');
jQuery('form#searchform').submit(function(event) {
event.preventDefault();
return false;
Listato 8.2 - Codice JQuery che nasconde la form di ricerca
Per rendere il modulo di ricerca ancora più interattivo, è stata utilizzata la proprietà keyup, che permette, quando si
comincia a scrivere nel campo di input, non appena si solleva il dito dal tasto digitato, di avviare la chiamata AJAX e
visualizzare immediatamente i risultati (Listato 8.3).
60
61
62
63
64
65
jQuery("input#seach-text").on('keyup', function(e) {
var valore = jQuery(this).val();
/*jQuery('#loading-ajax').fadeIn('low');*/
jQuery('#list-ajax').html('<div class="spinner"><div class="cube1"></div><div class="cube2"></div></div>');
ajaxSend("inputCall", valore, "", "", <?php echo "\"".$lang_data['FLAG_LANG']."\""; ?>); <?php // Chiamata
ajax per Input ?>
});
Listato 8.3 - Codicei JQuery che permette la ricerca interattiva
Lato server è necessario un metodo che intercetti le richieste ed elabori la risposta in formato JSON (usato per il
trasferimento dei dati è facile da leggere e scrivere per le persone, mentre per le macchine risulta facile da generare e
analizzare). Il metodo è contenuto nel file function.php (Listato 8.4) e restituisce un vettore con i valori
opportunamente definiti.
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
function get_json_data($key, $dip, $language, $type) {
require(get_dictionary_file()); // Per utilizzare il dizionario all'interno delle function
if($type == "laboratori") {
$searchLab = prepare_laboratori($key, $dip, $language);
$arrayEncode = $rowArray = array();
foreach ($searchLab as $obj) {
if(empty($obj->nome)) {
$nome = $lang_data['TITOLO_VUOTO'];
}else {
$nome = $obj->nome;
}
$imageSrc = get_immagine("laboratori_gen", "160x160", $obj->id."-".sluggify($obj->logo),
$language);
$descrizione = strip_tags($obj->descrizione);
$descrizione = taglio($descrizione, 300);
$rowArray['imageSrc'] = $imageSrc;
$rowArray['id'] = $obj->id;
$rowArray['nome'] = $nome;
$rowArray['sottotitolo'] = $obj->sottotitolo;
$rowArray['descrizione'] = $descrizione;
$rowArray['dipartimento'] = $obj->dipartimento;
$rowArray['linkPage'] = $lang_data['LAB_LINK'].$obj->id."-".sluggify($nome);
array_push($arrayEncode,$rowArray);
}
return json_encode($arrayEncode);
}
Listato 8.4 - Parte di codice che gestisce la risposta JSON della pagina relativa ai laboratori
All’interno, sempre, del modello dei laboratori è presente la parte che interpreta il codice JSON ed elabora le
informazioni ricevute (Listato 8.5). In particolare, tale parte preleva l’array JSON ed elabora i dati inserendoli
opportunamente all’interno di una stringa contenente anche la formattazione HTML e CSS. Al termine dell’elaborazione,
la stringa verrà stampata su video, all’interno di un div, dall’id #list-ajax.
122
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
121
122
123
124
125
126
127
128
129
130
131
132
jQuery.post('', postCall, function(data) {
var txt = "";
var count = 0;
jQuery.each(eval(data), function(i,valore){
txt += '<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><a target="_self" title="'+valore.nome+'"
href="'+valore.linkPage+'/"><div class="vc_row wpb_row vc_inner vc_row-fluid type1"><div class="vc_col-sm3 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"><img width="160" height="160" title="'+valore.nome+'" alt="'+valore.nome+'"
src="'+valore.imageSrc+'" class="vc_single_image-img type2"></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>'+valore.nome+'</b></h2><h4 class="entry-title mod
type2"><i>'+valore.sottotitolo+'</i></h4><p>'+valore.descrizione+'</p></div></div><div class="vc_button-2wrapper"></div></div></div></div></a>';
count++;
});
if (count == 0) {
txt = no_labs;
}
jQuery("#list-ajax").html(h3+txt);
});
Listato 8.5 - Elaborazione del JSON
Cliccando su una singola voce dell’elenco vengono visualizzati i dati relativi al singolo laboratorio (Figura 8.3). In get
vengono passati l’id ed il nome del laboratorio; quest’ultimo serve solo a rendere gli URL più user friendly.
Successivamente viene lanciata una query selettiva sul database per il prelievo delle informazioni.
Per ogni laboratorio vengono visualizzate le informazioni generali ed, in un sistema a tab, questa volta verticali,
vengono visualizzate le informazioni, come le attività svolte dal laboratorio, i progetti svolti, le persone afferenti, i temi
di ricerca trattati e le eventuali strumentazioni disponibili. L’ultima funzionalità permette di valorizzare le attrezzature
dell’Università, attualmente gestite tramite un “semplice” file PDF poco pratico.
Nel Listato 8.6 viene mostrato il metodo definito nel file funtion.php, che permette di scrivere gli URL in modalità
più chiara per gli utenti camuffando il passaggio delle variabili da una pagina e l’altra. Ogni volta che viene aggiunta una
nuova regola, vanno aggiornati i permalink di Wordpress lato back end.
137
138
139
140
141
142
143
144
145
function custom_rewrite_rule() {
add_rewrite_rule('^home/rubrica/schedapersonale/([^/]*)/?','index.php?page_id=675&idp=$matches[1]','top');
add_rewrite_rule('^home/ricerca/laboratori/([^/]*)/?','index.php?page_id=956&labid=$matches[1]','top');
add_rewrite_rule('home/research/labs/([^/]*)/?$','index.php?pagename=labs&labid=$matches[1]&lang=en','to
p');
}add_action('init', 'custom_rewrite_rule', 10, 0);
function my_em_rewrite_flush(){
global $wp_rewrite;
$wp_rewrite->flush_rules();
}add_action('init','my_em_rewrite_flush');
Listato 8.6 - Rewrite degli URL in Wordpress
Per la gestione del singolo laboratorio si è cercato di essere quanto più modulari possibili, cercando di creare
un’architettura a tre livelli indipendenti fra loro. In pratica si sono separate l’estrazione dei dati dal database,
l’elaborazione stessa dei risultati e la visualizzazione delle informazioni.
In particolare, per interrogare la base dei dati, si sono realizzati i metodi denominati prepare che prelevano le
informazioni del singolo laboratorio. Nel dettaglio, i metodi accettano in ingresso l’identificativo del laboratorio e la
lingua scelta per il prelievo delle informazioni (Listato 8.8Listato 8.13).
Per gestire la lingua in maniera più semplice, sul database, i campi che prevedono valori multilingua sono stati
nominati allo stesso modo a meno di un suffisso finale che identifica la lingua.
Demetrio Siclari
123
Implementazione delle parti avanzate
Figura 8.3 - Pagina del singolo laboratorio
La query viene eseguita concatenando semplicemente al nome del campo la variabile della lingua. Il metodo
get_translate_db($table, $attribute, $lf, $asRename) permette di gestire i campi vuoti.
La funzione, infatti, preleva le informazioni della lingua richiesta e, qualora il campo risultasse vuoto, per default
preleva le informazioni dal campo in lingua italiana. Il metodo permette, anche, di rinominare a piacimento l’attributo.
La funzione è visualizzata nel Listato 8.7.
1119
1120
124
function get_translate_db($table, $attribute, $lf, $asRename) {
if($lf == "_en") {
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
if(!empty($asRename)) {
$as = $asRename;
}
else {
$as = $attribute;
}
return "CASE ".
"WHEN (".$table.$attribute.$lf." IS NULL OR ".$table.$attribute.$lf." = \"\") ".
//"THEN CONCAT('(Not translated) ', ".$table.$attribute.") ".
"THEN ".$table.$attribute." ".
"ELSE ".$table.$attribute.$lf." ".
"END AS ".$as."";
}
else {
if(!empty($asRename)) {
$as = $asRename;
} else {
$as = $attribute;
}
return $table.$attribute." AS ".$as;
}
}
Listato 8.7 - Metodo get_translate_db per la gestione dei campi multilingua
Per il passaggio delle variabili, all’interno delle interrogazioni SQL, si è utilizzata la funzione prepare() di
Wordpress che, prima di inviare la query, la elabora trattando adeguatamente tutti i caratteri speciali. Questo metodo
permette di evitare errori durante la fase di inserimento dei dati ma, soprattutto, protegge il sistema dagli attacchi di SQL
injection.
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
function prepare_info_laboratorio($idLaboratorio, $language) {
$language = trim($language);
$lf = get_language_extension($language);
global $wpdb;
$rows = $wpdb->get_results(
$wpdb->prepare(
"SELECT l.id AS id, l.nome AS logo, ".get_translate_db("l.", "nome", $lf, "").",
".get_translate_db("l.", "sottotitolo", $lf, "").", ".get_translate_db("l.", "descrizione",
$lf, "").", ".get_translate_db("l.", "finalita", $lf, "").", ".get_translate_db("l.",
"attivita", $lf, "").", ".get_translate_db("l.", "relazioni_internazionali", $lf, "").",
l.dipartimento AS dipartimento, l.superficie AS superficie, l.locali AS locali, l.sito_web AS
sito_web, ".get_translate_db("l.", "note", $lf, "").", l.horizon_topics, l.research_indicators,
".get_translate_db("l.", "ubicazione", $lf, "")." ".
"FROM wpunirc_laboratorio_ricerca AS l ".
"WHERE l.id = %d ",
$idLaboratorio
)
);
return $rows;
}
Listato 8.8 - Metodo prepare_info_laboratorio()
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
function prepare_laboratorio_ssd($id) {
global $wpdb;
$rows = $wpdb->get_results(
$wpdb->prepare(
"SELECT rlr.ssd ".
"FROM wpunirc_rel_laboratorio_ricerca_ssd AS rlr ".
"WHERE rlr.laboratorio = %d ",
$id
)
);
return $rows;
}
Listato 8.9 - Metodo prepare() per prelevare gli SSD associati al laboratorio
Demetrio Siclari
125
Implementazione delle parti avanzate
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
function prepare_laboratorio_persone($id, $language) {
$language = trim($language);
$lf = get_language_extension($language);
global $wpdb;
$rows = $wpdb->get_results(
$wpdb->prepare(
"SELECT rlp.matricola, p.sesso, p.codice_fiscale, p.nome, p.cognome,
".get_translate_db("q.", "descrizione", $lf, "").", rlp.ruolo ".
"FROM wpunirc_rel_laboratorio_ricerca_persona AS rlp, wpunirc_persona AS p,
wpunirc_rel_persona_qualifica AS rpq, wpunirc_qualifica AS q ".
"WHERE rlp.id_lab = %d ".
"AND rlp.matricola = p.matricola ".
"AND rpq.matricola = p.matricola ".
"AND rpq.cod_qual = q.cod_qual",
$id
)
);
return $rows;
}
Listato 8.10 - Metodo prepare() per le prelevare le informazioni di tutte le persone associate al laboratorio
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
function prepare_laboratorio_progetti($id, $language){
$language = trim($language);
$lf = get_language_extension($language);
global $wpdb;
$rows= $wpdb->get_results(
$wpdb->prepare(
"SELECT pr.id, ".get_translate_db("pr.", "titolo", $lf, "").", ".get_translate_db("pr.",
"descrizione", $lf, "").", p.codice_fiscale, p.nome, p.cognome, pr.data_inizio ".
"FROM wpunirc_progetto AS pr, wpunirc_rel_progetto_persona AS pp, wpunirc_persona p ".
"WHERE pr.laboratorio = %d ".
"AND pp.progetto = pr.id ".
"AND pp.ruolo = 'coordinatore' ".
"AND p.matricola = pp.persona ".
"ORDER BY pr.data_inizio DESC; ",
$id
)
);
return $rows;
}
Listato 8.11 - Metodo prepare() per prelevare i progetti associati ad un laboratorio
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
function prepare_laboratorio_attrezzature($id, $language) {
$language = trim($language);
$lf = get_language_extension($language);
global $wpdb;
$rows = $wpdb->get_results(
$wpdb->prepare(
"SELECT p.codice_fiscale, p.nome, p.cognome, ga.id, ".get_translate_db("ga.", "nome", $lf,
"nomeattrezzatura").", rira.data_acquisto, rira.quantita ".
"FROM wpunirc_grandi_attrezzature AS ga, wpunirc_rel_laboratorio_ricerca_attrezzature AS
rira, wpunirc_persona AS p ".
"WHERE rira.laboratorio = %d ".
"AND rira.attrezzatura = ga.id ".
"AND p.matricola = ga.responsabile_scientifico ".
"ORDER BY ga.nome",
$id
)
);
return $rows;
}
Listato 8.12 - Metodo prepare() per prelevare le attrezzature di un laboratorio
1383
1384
1385
1386
1387
126
function prepare_laboratorio_termini_ricerca($id, $language){
$language = trim($language);
$lf = get_language_extension($language);
global $wpdb;
$rows = $wpdb->get_results($wpdb->prepare(
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
"SELECT ".get_translate_db("ur.", "keywords", $lf, "").", erc.codice, erc.descrizione,
p.codice_fiscale, p.nome, p.cognome ".
"FROM wpunirc_unita_ricerca AS ur, wpunirc_rel_unita_ricerca_erc AS ure,
wpunirc_rel_unita_ricerca_persona AS urp, wpunirc_settori_erc AS erc, wpunirc_persona AS p ".
"WHERE ur.laboratorio = %d ".
"AND ur.id = urp.id_unita_ricerca ".
"AND ur.id = ure.id_unita_ricerca ".
"AND erc.codice = ure.id_erc ".
"AND urp.id_responsabile = p.matricola ".
"ORDER BY Keywords",
$id
)
);
return $rows;
}
Listato 8.13 - Metodo prepare() per prelevare i termini di ricerca svolti da un laboratorio
Le informazioni prelevate tramite i metodi prepare()vengono elaborati dalla funzione
get_laboratorio_details($idNomeLaboratorio, $language) (Listato 8.14) che non fa altro che
riempire opportunamente un array dove, in ogni elemento, vengono inseriti i dati del laboratorio.
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
function get_laboratorio_details($idNomeLaboratorio, $language) {
require(get_dictionary_file()); // Per utilizzare il dizionario all'interno delle function
$datiLaboratorio = array();
$lab = explode("-", $idNomeLaboratorio);
$datiLaboratorio['laboratorioId'] = $lab[0];
// Controllo laboratorio se esiste
$laboratorio = prepare_info_laboratorio($lab[0], $language);
$datiLaboratorio['laboratorioEsiste'] = count($laboratorio);
$datiLaboratorio['laboratorioNomeIT'] = $laboratorio[0]->logo;
// Titolo
if(empty($laboratorio[0]->nome)) {
$datiLaboratorio['titolo_LAB'] = $lang_data['TITOLO']." ".$lang_data['NON_DISPONIBILE'];
}
else {
$datiLaboratorio['titolo_LAB'] = $laboratorio[0]->nome;
}
// Logo
$imageSrc = get_immagine("laboratori_singolo", "120x120", $lab[0]."-".sluggify($laboratorio[0]>logo), $language);
$datiLaboratorio['logo_LAB'] = "<img class=\"theme_image\" src=\"".$imageSrc."\"
title=\"".$labDetails['titolo_LAB']."\" alt=\"".$labDetails['titolo_LAB']."\"/>";
// Sottotitolo
if( empty($laboratorio[0]->sottotitolo) )
$datiLaboratorio['sottotitolo_LAB'] = $lang_data['SOTTOTITOLO']." ".$lang_data['NON_DISPONIBILE'];
else
$datiLaboratorio['sottotitolo_LAB'] = $laboratorio[0]->sottotitolo;
// Dipartimento
if(!empty($laboratorio[0]->dipartimento))
$datiLaboratorio['dipartimento_LAB'] = get_siglastrutture("display_name_menu", $laboratorio[0]>dipartimento);
else
$datiLaboratorio['dipartimento_LAB'] = "-";
// Superficie/Locali
if($laboratorio[0]->superficie != "") {
$labSup = $laboratorio[0]->superficie;
}
else {
$labSup = "-";
}
if($laboratorio[0]->locali != "") {
$labLoc = $laboratorio[0]->locali;
}
else {
$labLoc = "-";
}
$datiLaboratorio['supLoc_LAB'] = $labSup."/".$labLoc;
// SSD
$getSSD = prepare_laboratorio_ssd($laboratorio[0]->id);
if(count($getSSD) > 0) {
foreach($getSSD as $ssd) {
$result .= $ssd->ssd.", ";
}
Demetrio Siclari
127
Implementazione delle parti avanzate
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
128
$datiLaboratorio['ssd_LAB'] = trim($result, ", ");
}else {
$datiLaboratorio['ssd_LAB'] = "-";
}
// Sito Web
if(!empty($laboratorio[0]->sito_web)) {
$datiLaboratorio['sitoWeb_LAB'] = "<a href=\"".$laboratorio[0]->sito."\" target='_blank'
title='".$lang_data['SITOWEB']." ".$nome."'><img class='icon-file'
src='".$lang_data['IMAGE_FOLDER']."icon/link.png' alt='".$lang_data['SITOWEB']." ".$nome."'
style='height: 36px !important; width: 36px !important;'/></a>";
}
else {
$datiLaboratorio['sitoWeb_LAB'] = "-";
}
// Ubicazione
if(!empty($laboratorio[0]->ubicazione)) {
$datiLaboratorio['ubicazione_LAB'] = $laboratorio[0]->ubicazione;
}else {
$datiLaboratorio['ubicazione_LAB'] = "-";
}
// PERSONE RUOLI PRINCIPALI - AFFERENTI
$lab_persone = prepare_laboratorio_persone($lab[0], $language);
if(!empty($lab_persone)) {
$countRuoliPrinpali = 0;
$ruoliPrincipali = $persona = array();
$matricoleCS_PR = array();
foreach($lab_persone as $lp) {
if($lp->ruolo == "cs" || $lp->ruolo == "rt") {
array_push($matricoleCS_PR, $lp->matricola);
}
}
foreach($lab_persone as $lp) {
if($lp->ruolo == "cs" || $lp->ruolo == "rt") { // RUOLI PRINCIPALI
if(empty($lp->codice_fiscale)) {
$persona['nomePersona'] = $lang_data['NO_PERSONA_RUOLO'];
}
else {
$persona['nomePersona'] = ucwords(strtolower($lp->cognome." ".$lp->nome));
}
if($lp->ruolo == "cs") {
$persona['ruoloPersona'] = $lang_data['DIRETTORE'];
}
elseif($lp->ruolo == "rt") {
$persona['ruoloPersona'] = $lang_data['RESP_TECH'];
}
$persona['immaginePersona'] = get_immagine("personale", "60x60", strtolower($lp>codice_fiscale), $language);
$persona['linkPersona'] = $lang_data['PERSONA_LINK'].strtolower($lp->codice_fiscale);
array_push($ruoliPrincipali, $persona);
$countRuoliPrinpali++;
}
elseif($lp->ruolo == "gen" && !in_array($lp->matricola, $matricoleCS_PR)) { // AFFERENTI
$imgPA = get_immagine("personale", "60x60", strtolower($lp->codice_fiscale), $language);
$datiLaboratorio['afferenti_LAB'] .= "<a title=\"".ucwords(strtolower($lp->cognome." ".$lp>nome))."\" href=\"".$lang_data['PERSONA_LINK'].strtolower($lp->codice_fiscale)."\">".
"<div id=\"page-header\" class=\"header-author listMod\">".
"<div class=\"content-left\">".
"<div>".
"<h4 class=\"entry-title mod\"><b>".ucwords(strtolower($lp->cognome." ".$lp>nome))."</b></h4>".
"<h5 class=\"entry-title mod mod6\">".mappingQualifica($lp->descrizione, $lp>sesso)."</h5>".
"</div>".
"</div>".
"<div class=\"content-right listMod\">".
"<div class=\"faculty-avatar thumbnail right\">".
"<img class=\"theme_image\" src=\"".$imgPA."\" alt=\"".ucwords(strtolower($lp->cognome."
".$lp->nome))."\">".
"</div>".
"</div>".
"</div>".
"</a>";
}
}
if($countRuoliPrinpali == 0 || $countRuoliPrinpali == 1) {
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
$valueColumn = "one";
}
elseif($countRuoliPrinpali == 2) {
$valueColumn = "two";
}
foreach($ruoliPrincipali as $rp) {
$datiLaboratorio['ruoliPrincipali_LAB'] .= '<div class="6u-'.$valueColumn.'-column labdetails">'.
'<a title="'.$rp['nomePersona'].'" href="'.$rp['linkPersona'].'">'.
'<div id="page-header" class="header-author listMod">'.
'<div class="content-left">'.
'<div>'.
'<h4 class="entry-title mod"><b>'.$rp['nomePersona'].'</b></h4>'.
'<h5 class="entry-title mod">'.$rp['ruoloPersona'].'</h5>'.
'</div>'.
'</div>'.
'<div class="content-right listMod">'.
'<div class="faculty-avatar thumbnail right">'.
'<img class="theme_image" src="'.$rp['immaginePersona'].'" alt="'.$rp['nomePersona'].'">'.
'</div>'.
'</div>'.
'</div>'.
'</a>'.
'</div>';
}
}
else {
$datiLaboratorio['afferenti_LAB'] = "";
$datiLaboratorio['ruoliPrincipali_LAB'] = "";
}
// INFORMAZIONI - Finalità - Attività
$finalita = explode('<h2>Finalità</h2>', $laboratorio[0]->finalita);
$datiLaboratorio['finalita_LAB'] = strip_tags($finalita[1]);
$attivita = explode('<h2>Attività</h2>', $laboratorio[0]->attivita);
$datiLaboratorio['attivita_LAB'] = strip_tags($attivita[1]);
// PROGETTI
$progetti = prepare_laboratorio_progetti($lab[0], $language);
if(!empty($progetti)) {
foreach($progetti as $p) {
if( empty($p->descrizione) )
$Descrizione = $lang_data['DESCRIZIONE']." ".$lang_data['NON_DISPONIBILE'];
else
$Descrizione = taglio($p->descrizione, 200);
$datiLaboratorio['progetti_LAB'] .=
"<h4 class=\"entry-title mod content-mod\">".
"<a href=\"progetto".$p->id."\" title=\"".$p->titolo."\">".$p->titolo."</a>".
"</h4>".
"<p class='p-mod4'>".$Descrizione."</p>".
"<h6 class=\"entry-title mod9\">".$lang_data['RESPONSIBLE'].": ".
"<a href=\"".$lang_data['PERSONA_LINK'].strtolower($p->codice_fiscale)."\"
title=\"".ucwords(strtolower($p->nome))." ".ucwords(strtolower($p>cognome))."\">".ucwords(strtolower($p->nome))." ".ucwords(strtolower($p->cognome))."</a>".
"</h6><br><br>";
}
}
// STRUMENTAZIONE DISPONIBILE
$attrezzatura = prepare_laboratorio_attrezzature($lab[0], $language);
if(!empty($attrezzatura)) {
foreach($attrezzatura as $at) {
if( $at->quantita == "" )
$quantita = '-';
else
$quantita = $at->quantita;
$datiLaboratorio['strumentazione_LAB'] .=
"<h4 class=\"entry-title mod content-mod\">".
"<a href=\"attrezzatura".$at->id."\" title=\"".$at->nomeattrezzatura."\">".$at>nomeattrezzatura."</a>".
"</h4>".
"<p class='p-mod4'>".$lang_data['QUANTITA'].": ".$quantita."</p>".
"<h6 class=\"entry-title mod9\">".$lang_data['RESPONSIBLE'].": ".
"<a href=\"".$lang_data['PERSONA_LINK'].strtolower($at->codice_fiscale)."\"
title=\"".ucwords(strtolower($p->nome))." ".ucwords(strtolower($p>cognome))."\">".ucwords(strtolower($at->nome))." ".ucwords(strtolower($at->cognome))."</a>".
"</h6><br><br>";
}
}
Demetrio Siclari
129
Implementazione delle parti avanzate
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
130
// TEMI DI RICERCA
$temiricerca = prepare_laboratorio_termini_ricerca($lab[0], $language);
if(count($temiricerca) > 0){
foreach($temiricerca as $tr) {
$curTR = $tr->keywords;
$datiLaboratorio['temiRicerca_LAB'] .=
"<h5 class=\"entry-title mod\">".$lang_data['RESPONSIBLE'].": ".
"<span><a href=\"".$lang_data['PERSONA_LINK'].strtolower($tr->codice_fiscale)."\"
title=\"".ucwords(strtolower($tr->nome))." ".ucwords(strtolower($tr>cognome))."\">".ucwords(strtolower($tr->nome))." ".ucwords(strtolower($tr>cognome))."</a></span></h5>".
"<h5 class=\"entry-title mod\">".$lang_data['KEYWORDS'].": ".
"<span>".$tr->keywords."</span>".
"</h5>".
"<h5 class=\"entry-title mod\">".$lang_data['TEMATICHE_ERC'].": ";
foreach($temiricerca as $tr2) {
if($tr2->keywords == $curTR) {
$datiLaboratorio['temiRicerca_LAB'] .=
"<span>".$tr->codice." - ".$tr->descrizione."</a></span>";
}
}
$datiLaboratorio['temiRicerca_LAB'] .= "</h5><br>";
}
}
else {
$datiLaboratorio['temiRicerca_LAB'] = "";
}
// FOTO
$datiLaboratorio['foto_LAB'] = "";
if(!empty($laboratorio[0]->finalita) || !empty($laboratorio[0]->attivita)) {
$tabsDesktop .= "<li class='".str_replace(" ", "-", strtolower($lang_data['INFORMAZIONI']))."'><a
href=\"#".str_replace(" ", "-",
strtolower($lang_data['INFORMAZIONI']))."\">".$lang_data['INFORMAZIONI']."</a></li>";
$tabsMobile .= "<option value=\"".str_replace(" ", "-",
strtolower($lang_data['INFORMAZIONI']))."\">".$lang_data['INFORMAZIONI']."</option>";
}
if(!empty($datiLaboratorio['progetti_LAB'])) {
$tabsDesktop .= "<li class='".str_replace(" ", "-", strtolower($lang_data['PROGETTI']))."'><a
href=\"#".str_replace(" ", "-",
strtolower($lang_data['PROGETTI']))."\">".$lang_data['PROGETTI']."</a></li>";
$tabsMobile .= "<option value=\"".str_replace(" ", "-",
strtolower($lang_data['PROGETTI']))."\">".$lang_data['PROGETTI']."</option>";
}
if(!empty($datiLaboratorio['afferenti_LAB'])) {
$tabsDesktop .= "<li class='".str_replace(" ", "-",
strtolower($lang_data['PERS_AFFERENTI']))."'><a href=\"#".str_replace(" ", "-",
strtolower($lang_data['PERS_AFFERENTI']))."\">".$lang_data['PERS_AFFERENTI']."</a></li>";
$tabsMobile .= "<option value=\"".str_replace(" ", "-",
strtolower($lang_data['PERS_AFFERENTI']))."\">".$lang_data['PERS_AFFERENTI']."</option>";
}
if(!empty($datiLaboratorio['temiRicerca_LAB'])) {
$tabsDesktop .= "<li class='".str_replace(" ", "-", strtolower($lang_data['TEMI_RICERCA']))."'><a
href=\"#".str_replace(" ", "-",
strtolower($lang_data['TEMI_RICERCA']))."\">".$lang_data['TEMI_RICERCA']."</a></li>";
$tabsMobile .= "<option value=\"".str_replace(" ", "-",
strtolower($lang_data['TEMI_RICERCA']))."\">".$lang_data['TEMI_RICERCA']."</option>";
}
if(!empty($datiLaboratorio['strumentazione_LAB'])) {
$tabsDesktop .= "<li class='".str_replace(" ", "-",
strtolower($lang_data['STRUMENTAZIONE_DISPONIBILE']))."'><a href=\"#".str_replace(" ", "-",
strtolower($lang_data['STRUMENTAZIONE_DISPONIBILE']))."\">".$lang_data['STRUMENTAZIONE_DISPONIBILE']."</
a></li>";
$tabsMobile .= "<option value=\"".str_replace(" ", "-",
strtolower($lang_data['STRUMENTAZIONE_DISPONIBILE']))."\">".$lang_data['STRUMENTAZIONE_DISPONIBILE']."</
option>";
}
if(!empty($datiLaboratorio['foto_LAB'])) {
$tabsDesktop .= "<li class='".str_replace(" ", "-", strtolower($lang_data['FOTO']))."'><a
href=\"#".str_replace(" ", "-", strtolower($lang_data['FOTO']))."\">".$lang_data['FOTO']."</a></li>";
$tabsMobile .= "<option value=\"".str_replace(" ", "-",
strtolower($lang_data['FOTO']))."\">".$lang_data['FOTO']."</option>";
}
if( (!empty($laboratorio[0]->finalita) || !empty($laboratorio[0]->attivita)) ||
(!empty($datiLaboratorio['progetti_LAB'])) || (!empty($datiLaboratorio['afferenti_LAB'])) ||
(!empty($datiLaboratorio['temiRicerca_LAB'])) || (!empty($datiLaboratorio['strumentazione_LAB'])) ||
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
1611
1612
1613
1614
1615
1616
1617
1618
1619
(!empty($datiLaboratorio['foto_LAB']))) {
$datiLaboratorio['tabsDesktop_LAB'] = "<ul class=\"menu-sidebar desktop\">".$tabsDesktop."</ul>";
$datiLaboratorio['tabsMobile_LAB'] = "<select id=\"tabsResponsive\"
name=\"tabsResponsive\">".$tabsMobile."</select>";
}
else {
$datiLaboratorio['tabsDesktop_LAB'] = "";
$datiLaboratorio['tabsMobile_LAB'] = "";
}
return $datiLaboratorio;
}
Listato 8.14 - Metodo get_laboratorio_details() che elabora tutte le informazioni del singolo laboratorio
L’esecuzione del metodo precedentemente descritto non fa altro che creare un array di elementi con tutte le
informazioni del laboratorio. Richiamando il singolo elemento dell’array si potrà ottenere la specifica informazione del
laboratorio. Ciò semplifica le operazioni sia di visualizzazione che di modifica. Su alcuni dati, ad esempio, basterà
semplicemente trattare l’elaborazione dei dati del singolo elemento dell’array. Nel Listato 8.15 viene mostrato come
vengono stampate su video le informazioni del laboratorio.
$labDetails è un array riempito tramite il metodo get_laboratorio_details(),visto in precendenza.
Richiamando il singolo elemento all’interno dell’HTML è possibile andare a comporre la pagina del singolo laboratorio
con semplicità. In caso di cambio di disposizione dei dati all’interno della pagina, basterà, semplicemente, rimuovere o
spostare gli echo effettuati. Il codice finale del modello Laboratori sarà così più snello e semplice da consultare,
lasciando il grosso della complessità al metodo di elaborazione dei dati.
340
341
342
343
344
345
346
347
348
349
350
351
352
353
<div class="6u-two-column">
<h5><?php echo $lang_data['DIPARTIMENTO']; ?>:
<span>
<?php
echo $labDetails['dipartimento_LAB']
?>
</span>
</h5>
</div>
<div class="6u-two-column">
<h5><?php echo $lang_data['SUPERFICIE']."/".$lang_data['LOCALI']; ?>:
<span>
<?php
echo $labDetails['supLoc_LAB'];
?>
</span>
</h5>
Listato 8.15 - Esempio di stampa delle informazioni del laboratorio nel modello Laboratori
Per gestire la generazione dinamica di tutte le immagini è stata realizzata la funzione get_immagine(). Questa
riceve in ingresso:
il tipo di immagine da prelevare (ad esempio se si tratta di un laboratorio, di una persona, etc.);
la grandezza (in alcuni casi, come per personale dell’Università, le foto sono presenti con risoluzione
diverse);
il nome del file (per il personale è il codice fiscale, per i laboratori l’id, etc.);
la lingua utilizzata per selezionare un’immagine rispetto ad un'altra.
Il metodo non fa altro che concatenare le informazioni ottenendo, così, un percorso dove va a cercare la foto nei
formati jpg o png. Qualora la foto non è presente, la funzione restituirà una foto di default da visualizzare. La parte del
metodo get_immagine() che gestisce la foto del laboratorio è descritta nel Listato 8.16.
Demetrio Siclari
131
Implementazione delle parti avanzate
1666
1667
function get_immagine($type, $size, $nomeFile, $lang_ext) {
require(get_dictionary_file()); // Per utilizzare il dizionario all'interno delle function
[….]
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
elseif ($type == "laboratori_singolo" || $type == "laboratori_gen") { // Immagini LABORATORI
if(file_exists($lang_data['IMAGE_PATH_FUNCTION']."laboratori/".$size."/lab-".$nomeFile.".jpg")) {
$timestamp = date("YmdHis", filemtime($lang_data['IMAGE_PATH_FUNCTION']."laboratori/".$size."/lab".$nomeFile.".jpg"));
$imageSrc = $lang_data['IMAGE_FOLDER']."laboratori/".$size."/lab".$nomeFile.".jpg?ts=".$timestamp;
}
elseif(file_exists("public/img/laboratori/".$size."/lab-".$nomeFile.".png")) {
$timestamp = date("YmdHis", filemtime($lang_data['IMAGE_PATH_FUNCTION']."laboratori/".$size."/lab".$nomeFile.".png"));
$imageSrc = $lang_data['IMAGE_FOLDER']."laboratori/".$size."/lab".$nomeFile.".png?ts=".$timestamp;
}
else {
1694
1695
1696
1697
1698
1699
1700
1701
if($type == "laboratori_singolo") {
$imageSrc = $lang_data['IMAGE_FOLDER']."laboratori/no-photo_120x120.png";
}
elseif($type == "laboratori_gen") {
$imageSrc = $lang_data['IMAGE_FOLDER']."no-image".$lang_ext.".jpg";
}
}
}
[…]
Listato 8.16 - Parte del metodo get_immagine() che gestisce le immagini del laboratorio
Gestione dell’amministrazione centrale
L’amministrazione centrale è la parte del portale, utile soprattutto al personale docente e tecnico-amministrativo,
per individuare le varie strutture dell’Ateneo ed i loro responsabili. Le informazioni si poggiano su delle tabelle
memorizzate su database che vengono aggiornate ogni sera tramite crawler automatizzati che prelevano i dati da altri
database. Non potendo lavorare direttamente sugli script d’importazione non si è potuto agire sulla ristrutturazione della
parte che gestisce la persistenza dei dati delle strutture.
Tuttavia, a causa delle elaborazioni contorte e complesse per prelevare ed organizzare i dati, si è optato per la
realizzazione di un trigger che crea un’opportuna tabella, sistemando ed ordinando automaticamente i dati, agevolando
così di molto le query da effettuare. Il trigger si attiva ogniqualvolta viene effettuato un inserimento nelle tabelle che
gestiscono le strutture e crea e riempie una tabella denominata wp_strutturavista. Nel Listato 8.17 viene mostrato
il corpo del trigger che automaticamente crea la tabella ed importa i dati.
1
begin
2
3
delete from wp_strutturavista;
INSERT INTO wp_strutturavista (codice, strutt_sup, descrizione, indirizzo, comune, provincia,
cap)
SELECT
4
5
6
7
8
9
10
11
12
13
14
15
16
132
wpunirc_struttura.codice,
wpunirc_struttura.strutt_sup,
wpunirc_struttura.descrizione,
wpunirc_struttura.indirizzo,
wpunirc_struttura.comune,
wpunirc_struttura.provincia,
wpunirc_struttura.cap
FROM wpunirc_struttura;
UPDATE wp_strutturavista
LEFT JOIN wpunirc_struttura_attivita
ON wpunirc_struttura_attivita.codice = wp_strutturavista.codice
SET wp_strutturavista.attivita = wpunirc_struttura_attivita.attivita;
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
UPDATE wp_strutturavista
LEFT JOIN wpunirc_struttura_tel
ON wpunirc_struttura_tel.codice_str = wp_strutturavista.codice
SET wp_strutturavista.telefono = wpunirc_struttura_tel.numero
WHERE wpunirc_struttura_tel.cd_tel =1;
UPDATE wp_strutturavista
LEFT JOIN wpunirc_struttura_tel
ON wpunirc_struttura_tel.codice_str = wp_strutturavista.codice
SET wp_strutturavista.fax = wpunirc_struttura_tel.numero
WHERE wpunirc_struttura_tel.cd_tel =2;
UPDATE wp_strutturavista
LEFT JOIN wpunirc_struttura_tel
ON wpunirc_struttura_tel.codice_str = wp_strutturavista.codice
SET wp_strutturavista.email = wpunirc_struttura_tel.numero
WHERE wpunirc_struttura_tel.cd_tel =4;
UPDATE wp_strutturavista
LEFT JOIN wpunirc_struttura_tel
ON wpunirc_struttura_tel.codice_str = wp_strutturavista.codice
SET wp_strutturavista.pec = wpunirc_struttura_tel.numero
WHERE wpunirc_struttura_tel.cd_tel =5;
UPDATE wp_strutturavista
LEFT JOIN wpunirc_struttura_tel
ON wpunirc_struttura_tel.codice_str = wp_strutturavista.codice
SET wp_strutturavista.responsabile = wpunirc_struttura_tel.numero
WHERE wpunirc_struttura_tel.cd_tel =3;
UPDATE wp_strutturavista
SET wp_strutturavista.livello = 0
WHERE wp_strutturavista.codice = 492;
UPDATE wp_strutturavista
SET wp_strutturavista.livello = 1
WHERE wp_strutturavista.strutt_sup = 492;
UPDATE wp_strutturavista
SET wp_strutturavista.livello = 2
WHERE wp_strutturavista.strutt_sup IN
(Select DISTINCT s1.codice
FROM wpunirc_struttura AS s1
Where s1.strutt_sup = 492);
UPDATE wp_strutturavista
SET wp_strutturavista.livello = 3
WHERE wp_strutturavista.strutt_sup IN
(Select DISTINCT s1.codice
FROM wpunirc_struttura AS s1
Where s1.strutt_sup IN
(Select DISTINCT s1.codice
FROM wpunirc_struttura AS s1
Where s1.strutt_sup = 492
)
);
End
Listato 8.17 - Trigger di creazione della tabella wp_struttura
Le modalità di gestione dei dati sono molto simili alla pagina dei laboratori. In una prima pagina viene visualizzato
l’elenco delle strutture in ordine di livello e descrizione, con la possibilità di filtrarle in base al tipo o di effettuare ricerche.
Per ogni struttura viene visualizzato il nome, il responsabile, con la possibilità di visualizzare la scheda della persona,
il telefono, il fax e l’email. Per quanto riguarda il telefono, questo è stato reso cliccabile tramite HTML5. Se si possiede un
software specifico (ad esempio skype), col semplice click sul numero di telefono, sarà possibile avviare la chiamata.
Questa opzione agevola soprattutto durante la navigazione da smartphone poiché, cliccando sul numero, si avrà la
possibilità di chiamare direttamente, evitando difficili operazioni di copia e incolla.
Anche l’email è cliccabile e, soprattutto, copiabile, come richiesto da molti stakeholder durante le interviste. Per
evitare eventuali bot che potrebbero prelevare gli indirizzi email e riempire di spam i proprietari, è stato utilizzato il
Demetrio Siclari
133
Implementazione delle parti avanzate
metodo del cifrario di Cesare con chiave 13. Il metodo, riportato nel Listato 8.18, non fa altro che ruotare opportunamente
il testo delle email mostrandolo normalmente nel video, ma rendendolo non interpretabile lato codice sorgente, che
viene letto dai vari crawling email.
Questi sono alcuni accorgimenti introdotti grazie alla progettazione UX Design a seguito dell’analisi della fase delle
interviste e dei problemi che gli utenti riscontrano durante la navigazione sull’attuale portale di Ateneo.
751
752
753
754
755
756
757
function encrypted_link($addr, $linkContent) {
$Unencrypted_Link = '<a href="mailto:'.$addr.'">'.$linkContent.'</a>';
$Noscript_Link = '<noscript><span style="unicode-bidi:bidioverride;direction:rtl;">'.strrev($addr).'</span></noscript>';
$Encrypted_Link = '<script
type="text/javascript">CFEP.write(\''.str_rot13($Unencrypted_Link).'\');</script>'.$Noscript_Link;
return $Encrypted_Link;
}
Listato 8.18 - Metodo di cifratura delle email
La singola voce dell’amministrazione centrale riporta tutte le informazioni relative alla struttura. Vengono mostrate,
ad esempio, le attività, le strutture superiori ed afferenti, il personale che appartiene alla struttura e tutta la modulistica
d’interesse per la struttura. Le informazioni sono contenute in apposite strutture ad accordion ad espansione per
agevolare la consultazione rapida della pagina.
134
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 8.4 - Pagina dell'amministrazione centrale
Demetrio Siclari
135
Confronto con gli altri portali universitari
In questo capitolo confronteremo il sistema realizzato con svariatii portali di Ateneo tra i più famosi in Italia e all’estero. Per
ciascun portale evidenzieremo, in breve, le migliori caratteristiche migliori cercando di compararle con quelle relative al sito
Web istituzionale da noi realizzato al fine di individuare le analogie, le differenze nonché i punti di forza e di debolezza del
nostro portale.
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Introduzione
Giunti ormai ad un buon punto della fase implementativa si ha un prodotto molto vicino alla fase finale. Si è, infatti,
vicini al rilascio, che prevede la messa online del portale, in parallelo all’attuale, per osservare una fase di testing durante
la quale tutti gli stakeholder possono utilizzare il sito e segnalare eventuali problemi e/o migliorie.
In questa fase si è anche più consapevoli del lavoro effettuato ed è, quindi, possibile confrontare il nuovo portale con
gli altri siti di Atenei.
Anche se la Mediterranea è un piccolo Ateneo, nulla ci vieta di confrontarci con i migliori portali universitari in
circolazione per capire i limiti e le migliorie apportate dal nostro sistema ed eventualmente i possibili punti di
miglioramento.
Il confronto ha preso in considerazione i più nuovi e migliori portali di Atenei italiani; a fianco a questi si sono presi in
considerazione anche i siti Web di due grandi Università a livello mondiale, come Oxford e Stanford.
Il portale dell’Università di Bologna
Uno dei migliori siti di Università italiane analizzati è sicuramente unibo.it (Figura 9.1). Esso ha una grafica piacevole
e semplice, con gli elementi ben organizzati all’interno della pagina. La qualità dei contenuti è il punto forte del sistema,
con informazioni chiare e dirette.
Ad aiutare la reperibilità delle informazioni il modulo “i più cercati” sotto il menù di navigazione laterale che, a
seconda della pagina consultata, consiglia i contenuti più utili della sezione. Senza di esso, però, risulta difficoltoso
accedere ad alcune informazioni tramite il menù di navigazione.
Il sito offre, anche, un filtraggio dei contenuti per le tipologie di utenti “futuri studenti”, “studenti iscritti”, “studenti
internazionali”, “laureati”, “enti e imprese” e “personale” offrendo dei punti d’accesso alle informazioni a seconda del
ruolo. Tuttavia i collegamenti rimandano ad altre aree del sito facendo un po’ perdere l’orientamento durante la
successiva navigazione e costringendo, spesso, a ritornare alla pagina del ruolo.
La gestione della profilazione utente è, quindi, solo in parte gestita, e non risolve del tutto i problemi dell’affollamento
dei contenuti offerti. Sul nostro portale, invece, sono stati previsti dei veri e propri mini-portali, pensati a misura sul ruolo
della persona, che offrono allo stakeholder, in maniera chiara, l’accesso alle informazioni. I contenuti, sul nostro sito, sono
anche disposti in maniera tale che l’utente navighi seguendo dei percorsi quasi prestabiliti, che aumentano le possibilità
di raggiungere le informazioni cercate.
Il sito unibo.it è responsive anche se da mobile i testi appaiono un po’ piccoli da leggere. Per migliorare
l’accessibilità dai vari dispositivi il nostro sistema supporta più “breakpoint” per cercare di facilitare la lettura da ogni
schermo.
Il portale dell’Università di Padova
Il portale unipd.it (Figura 9.2) è graficamente ben fatto, anche se punta molto a compattare le informazioni e, quindi,
a primo impatto, non è così immediato muoversi al suo interno. Tuttavia le parole chiare ben evidenziate permettono di
arrivare rapidamente alla sezione desiderata. La scelta, nel nostro portale, di puntare a catturare al primo impatto
l’attenzione degli stakeholder interni agevola di molto l’approccio al portale dei visitatori rispetto a quanto avviene per il
portale dell’Università di Padova.
Sul sito unipd.it la profilazione utente è, sicuramente, meglio gestista rispetto ad unibo.it anche se manca
una voce specifica per lo studente internazionale e questi ultimi devono accedere all’area internazionale. La gestione
bilingue è, sicuramente, uno dei punti di forza del portale che mostra una versione inglese ottimizzata per i visitatori
stranieri.
La gestione a tile, presente sul nostro portale, riesce a trasmettere più facilmente l’accesso alle diverse aree senza
dover identificare le opportune parole chiave all’interno della pagina.
Demetrio Siclari
137
Confronto con gli altri portali universitari
Figura 9.1 – La home page del portale dell'Università di Bologna
138
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 9.2 - La home page del portale dell'Università di Padova
Demetrio Siclari
139
Confronto con gli altri portali universitari
Il portale dell’Università di Torino
Unito.it è un portale recente, che ricalca un po’ lo stile classico con due voci per l’accesso rapido ai contenuti. La
prima voce “come fare per” offre un accesso a cinque macro-sezioni, non legate fra loro, di supporto mentre la voce “chi
sei?” gestisce la profilazione dell’utente all’interno del portale. Come per unibo.it la profilazione degli utenti consiste
soltanto in una raccolta di link utili che, una volta acceduti, costringono spesso l’utente a tornare indietro senza seguire
dei percorsi precisi. La consultazione degli allegati o degli approfondimenti sulla sidebar di sinistra non è intuitiva e di
immediata visualizzazione, passando in secondo piano. La navigazione all’interno dei contenuti non è intuitiva e
semplice, come sul nostro portale.
Non perfetta la gestione dell’accessibilità; con i JavaScript disattivati, unito.it non permette la visualizzazione
degli slider o la corretta visualizzazione di alcune parti (Figura 9.3). Al contrario, sul nostro portale, tutte le funzionalità
sono state testate per offrire una piena accessibilità ai contenuti anche per gli utenti sprovvisti di javascript. In Figura 9.4
è visualizzata la home page del portale.
Figura 9.3 - Visualizzazione delle pagine di Unito.it senza JavaScrip abilitati
Il portale dell’Università di Firenze
Unifi.it (Figura 9.5) ha una struttura molto particolare fatta di riquadri sparsi all’interno della pagina per
identificare le varie sezioni. Peccato che l’ordine con cui sono disposti i riquadri sembra quasi lasciato al caso. L’utente
deve fare un primo sforzo per identificare il punto di accesso desiderato.
Una volta all’interno del portale, la navigazione è più chiara, ma il sito offre una grafica non responsive, che lascia una
struttura fissa di 980px con i testi aventi la grandezza del font di 12px che non agevola la lettura negli schermi dei moderni
personal computer e rende difficoltosa la navigazione dai dispositivi mobili.
Il nostro portale, invece, ha avuto un approccio first mobile che ha permesso di ottimizzare la visualizzazione delle
pagine su ogni dispositivo, dal piccolo smartphone sino allo schermo ad alta risoluzione.
I tile presenti sul nostro portale permettono l’accesso chiaro e rapido alle sezioni, e la disposizione dei tile stessi è
stata scelta appositamente per dare più importanza ai contenuti più ricercati rispetto ad altri.
In Figura 9.6 vengono mostrati i problemi di visualizzazione della home page di unifi.it con JavaScript disabilitati.
Il portale dell’Università di Siena
Unisi.it (Figura 9.7) è un sito abbastanza recente dalla home page che focalizza l’attenzione sulle foto di Siena
che scorrono sul fondo in uno slider che distraggono un po’ dall’accesso dei contenuti. Utili, invece, i percorsi rapidi che,
essendo posizionati dopo lo scroll perdono di importanza. All’interno la struttura a tre colonne non esalta i contenuti e le
sidebar, a volte lunghissime, non rendono semplice l’accesso al footer con i link rapidi. Poco pratica la non uniformità
140
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
della disposizione delle colonne che, a volte, mostrano i contenuti nella parte centrale e a volte nella parte sinistra,
creando un po’ di confusione.
Sul nostro portale, invece, si è cercato uno stile omogeneo per tutte le pagine, lasciando una guida di stile precisa per
la creazione di nuovi contenuti.
Figura 9.4 – La home page del portale dell'Università di Torino
Demetrio Siclari
141
Confronto con gli altri portali universitari
Figura 9.5 – La home page del portale dell’ Università di Firenze
142
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 9.6 - Home page del portale Unifi.it con JavaScript disattivati
Demetrio Siclari
143
Confronto con gli altri portali universitari
Figura 9.7 - La home page del portale dell'Università di Siena
144
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Il portale dell’Università di Oxford
Ox.ac.uk (Figura 9.8), come la maggior parte dei portali stranieri, è un sito totalmente vetrina dedicato al visitatore
esterno. Colpisce l’attenzione con foto, news di rilievo e mostrando gli enormi successi che l’Università ottiene in ambito
di ricerca. Il portale distingue tre principali aree d’interesse: “undergraduate”, “graduate” e “continuing education” e, per
ognuna di queste macro-sezioni, offre contenuti mirati, cercando di motivare al meglio la scelta di andare all’Università
di Oxford.
Le immagini, ben integrate con la grafica, riescono a comunicare chiaramente il messaggio di eccellenza e la lunga
storia che caratterizza Oxford.
Nel nostro piccolo, anche sul nostro portale si è giocato sulle immagini per catturare l’attenzione e condurre
l’interesse dell’utente in aree precise del sito. Inoltre, nella home page, sono riportate le storie di successo degli ex
studenti e i riconoscimenti ottenuti, per attirare l’attenzione degli utenti esterni e per mostrare le eccellenze dell’Ateneo.
Il portale dell’Università di Stanford
Semplice, ma al tempo stesso, efficace stanford.edu (Figura 9.9) rappresenta un chiaro esempio di come
dovrebbe essere un portale universitario. Esso, infatti, mette in risalto i risultati ottenuti e le top story racchiudendo, poi,
tutte le informazioni, orientate per i visitatori esterni, in cinque macro-sezioni per ciascuna delle quali vengono elencate
interessanti statistiche che colpiscono l’attenzione.
I contenuti su standford.edu sono diretti e brevi, con link di approfondimento. Anche sul nostro portale si è
cercato di fornire altrettanta chiarezza nei contenuti, ove possibile, cercando anche di adattare i titoli, la formattazione
ed i toni a seconda del profilo utente di riferimento.
Demetrio Siclari
145
Confronto con gli altri portali universitari
Figura 9.8 – La home page deI portale dell'Università di Oxford
146
Demetrio Siclari
Progettazione basata sulla “User Experience” del nuovo sito Web di Ateneo …
Figura 9.9 – La home page del portale dell'Università di Stanford
Demetrio Siclari
147
Confronto con gli altri portali universitari
Figura 9.10 - Pagina “in breve” sul portale dell’Università di Stanford
148
Demetrio Siclari
Conclusioni e sviluppi futuri
In questa tesi sono state descritte alcune delle attività connesse con la progettazione e l’implementazione del nuovo
sito Web istituzionale dell’Università Mediterranea di Reggio Calabria.
Innanzitutto, si sono viste le ragioni che hanno portato la governance dell’Ateneo a optare per la realizzazione di un
nuovo sito Web istituzionale che fosse al passo con i tempi, sia per ciò che riguarda gli aspetti comunicativi che per ciò
che concerne gli aspetti tecnologici. In particolare, per facilitare al massimo l’accesso e la fruibilità dei contenuti da parte
dei vari stakeholder, si è deciso di progettare il sito seguendo i dettami dello User Experience design, molto in voga
all’estero, ma ancora poco noto in Italia. Al meglio della nostra conoscenza, questo è il primo sito Web istituzionale di una
un’università che adotta tale tecnica di progettazione. Per quanto concerne gli aspetti tecnici, si è deciso di adottare un
Content Management System (e, in questo caso, la scelta è ricaduta su Wordpress) e di realizzare un sito “responsive”
che fosse, quindi, facilmente fruibile anche dai dispositivi mobili.
Nella realizzazione del sito, chiaramente, sono state prese in considerazione tutte le linee guida per i siti web delle
PA, elaborate da un gruppo di lavoro composto da DigitPA, dal Dipartimento per la funzione pubblica (PCM), dal
Dipartimento per la digitalizzazione e l’innovazione tecnologica (PCM) e da FormezPA.
Inizialmente è stato esaminato il sito web corrente per individuare i punti di forza e di debolezza. Successivamente
sono state effettuate svariate interviste ai possibili stakeholder interni ed esterni dell’Ateneo per conoscere il loro parere
sul sito corrente e per sapere quali funzionalità, a loro avviso, dovevano essere presenti sul nuovo sito.
Parallelamente sono stati individuati il CMS da utlizzare, il corrispettivo tema e i corrispondenti plug-in di base.
La fase di progettazione del nuovo sito è proseguita con le attività di elicitazione, che hanno consentito di strutturare
le informazioni nelle varie pagine e di realizzare i mock-up corrispondenti.
Una volta costruiti i mock-up si è proceduti all’implementazione delle pagine di base e di alcune sezioni avanzate, in
particolare quella relativa ai laboratori e quella concernente l’amministrazione centrale.
Chiaramente non basta una tesi magistrale per poter costruire un sito web istituzionale di Ateneo e, infatti,
attualmente sta lavorando alla costruzione di tale piattaforma un gruppo molto affiatato di studenti composto, al
momento, da nove persone. La governance dell’Ateneo, infatti, ha scelto di affidare (caso unico in Italia), la realizzazione
del sito web istituzionale agli studenti in modo tale che emergessero chiaramente il loro punto di vista (che, ad avviso
della governance, deve essere il punto di vista maggiormente privilegiato) e le loro necessità. Questa tesi ha posto le basi
affinchè le altre persone che attualmente lavorano al progetto, nonché coloro che si aggiungeranno in seguito, possano
operare con il massimo livello di integrazione.
Per quanto riguarda gli sviluppi futuri, si pensa di poter terminare la costruzione di una prima versione del front-end
del sito per la fine di giugno. Successivamente, si prevede di rendere pubblico il sito all’interno dell’Ateneo in modo tale
che tutti gli eventuali stakeholder possano porre le loro osservazioni e/o proposte. Ciò in piena sintonia con la filosofia
dello User Experience design.
A partire da luglio si pensa di iniziare la fase di costruzione del back end del sito, con la gestione dell’autenticazione,
dei diritti di accesso e delle pagine di costruzione delle informazioni. Sarà, inoltre, necessario realizzare in parallelo la
versione inglese del sito, dal momento che si è deciso di costruire un sito totalmente bilingue. Si pensa di poter pubblicare
definitivamente il sito per la fine del corrente anno solare.
La pubblicazione del sito non comporterà, però, la fine delle attività. Per evitare, infatti, che esso degradi
rapidamente sarà necessario progettare ed avviare le attività di manutenzione correttiva, adeguativa, migliorativa ed
evolutiva.
In parallelo dovranno essere ristrutturati i siti dei dipartimenti per fare in modo che essi si adeguino, nella filosofia
generale, al sito di Ateneo. Infine, si pensa di costruire un social network degli “alumni”, ovvero degli ex-studenti della
Mediterranea, in modo tale da mettere in contatto gli attuali studenti con i loro predecessori, facilitando ai primi
l’inserimento nel mondo del lavoro.
Bibliografia
1.
Card Sorting + Tree Testing: The Science Of Great Site Navigatione. http://www.measuringu.com/blog/cardsort-treetest.php. 2015.
3.
Codex Wordpress. http://codex.wordpress.org/, 2015.
Come organizzare i contenuti per un Sito Web Efficace http://www.slideshare.net/f.micali/come-organizzare-i-
4.
5.
contenuti-per-un-sito-web-efficace-mediabeta-consulneza-web-marketing, 2015.
CSS Media queries: le basi. 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.
2.
6.
7.
8.
9.
How to use mockup in the UX design process. http://www.creativebloq.com/web-design/use-mockups-21514108, 2015.
Joomla and Wordpress: una questione di modelli mentali. http://www.joomla.it/articoli-della-community/4488joomla-and-wordpress-una-questione-di-modelli-mentali.html, 2015.
Know where and why people get lost in your content. https://www.optimalworkshop.com/treejack.htm, 2015.
La sfida della trovabilità – Architettura dell’informazione. http://www.slideshare.net/a.martellone/ia-la-sfida-della-
trovabilit, 2015.
10. Linee guida per i siti Web delle PA.
http://www.funzionepubblica.gov.it/media/835828/linee_guida_siti_web_delle_pa_2011.pdf, 2015.
11. User Centred Design. http://paznow.s3.amazonaws.com/User-Centred-Design.pdf, 2015.
12. Wireframe, prototype e mockup – dove è la differenza?. http://www.webhouseit.com/wireframe-prototype-e-mockupdove-sta-la-differenza/, 2015.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
C. Bowles and J. Box. Undercover User Experience Design. Voices That Matter, 2011.
J. Casabona. Responsive Design con Wordpress. Digital Lifestyle, 2014
B. Di Bello. Worpress. La guida completa. Creare blog e siti professionali. Hoepli, 2014.
M.C. Lavazza. Comunicare la User Experience Dall’‘idea al progetto. Apogeo.
M.C. Lavazza. Dall’idea al prototipo: i documenti nelle diverse fasi del progetto Web, 2010
M.C. Lavazza. Organizzare i contenuti di un sito. I quaderni del MdS, 2006.
M.C. Lavazza. Progettare in grande per schermi piccolo. Bento Book, 2014.
M.C. Lavazza. Le User Experience Map cosa sono, a cosa servono, come farle. Bento Book, 2014.
M. Levin. Designing Multi-Device Experiences. O’Reilly, 2014.
M. Mariani. User Experience Design. Ebook.
A. Mendoza. Mobile User Experience. Elsevier, 2014.
J. Nielsen. Web usability 2.0. L’usabilità che conta. Apogeo, 2010.
J. Pasquini and S.G iorni. Web usability. Guida completa alla User Experience e all’usabilità per comunicare e
vendere online. Hoepli, 2014.
26. S. Postai. Web design in pratica. Hopps, 2006.
27. U. Santucci. Mappe mentali e scrittura. i quaderni del MdS, 2011.
28. M.Visciola. Usabilità dei siti Web. Curare l’esperienza d’uso in Internet. Apogeo, 2006.
Ringraziamenti
Giunto a termine di questo percorso formativo desidero ringraziare tutte le persone che ho conosciuto in questi anni
poiché, chi più e chi meno, hanno contribuito a farmi maturare e farmi diventare la persona che sono oggi.
Desidero ringraziare, in modo davvero speciale, il Professore Domenico Ursino per la sua grande professionalità,
pazienza e cortesia dimostrate. Grazie per avermi dato fiducia e per avermi sempre valorizzato, aiutandomi a credere in
più in me stesso e nelle mie capacità. Grazie per avermi insegnato, tramite Barbiana, i valori della collaborazione e del
“value ecosystem” over “value chain”.
Vorrei ringraziare la Professoressa Maria Cristina Lavazza per la sua preziosa consulenza, per averci insegnato nuove
tecniche e metodologie e per averci trasmesso sempre tanto entusiasmo e tanta forza durante i lavori.
Ringrazio Roberto Cavallini, UX manager & partener biz development presso Microsoft, per il suo contributo e i suoi
consigli sull’arrangiamento grafico al portale di Ateneo.
Ringrazio Piervincenzo Russo, digital product manager presso Telecom Italia, per i suoi suggerimenti volti a migliorare
il lavoro realizzato.
Ringrazio Melchiorre Monaca e Fabio Tripodi, assieme a tutto il SIAt, per la loro disponibilità, il loro supporto e per
averci più volte “sopportato” presso i loro uffici.
Ringrazio tutti i colleghi del laboratorio per aver reso meno pesante lo studio, grazie alla loro allegria, alle pause caffè
e “call for pizza”, che hanno reso il gruppo più coeso e produttivo.
Ringrazio tutti i colleghi con i quali ho studiato in questi anni, in particolare un affettuoso ringraziamento va a Simona,
a Demetrio, ad Agostino, a Domenico C., veri e propri amici, e a Francesco, Daniele, Giovanni e Domenico R. con i quali
ho condiviso pene e gioie degli ultimi esami.
Infine, un pensiero davvero speciale va alla mia bellissima fidanzata che ha sempre creduto in me, incoraggiandomi
nei momenti difficili. Grazie per essere come sei e non arrabbiarti mai quando per studio o altro non ho mai abbastanza
tempo da dedicarti.
Scarica
