Autore: Simone Barni

Pubblicato il

Grafica e UI, facciamo “sistema”

In questo progetto non stiamo lavorando su un semplice sito web, stiamo costruendo il Portale di un grande Ateneo generalista, un oggettino fatto di 700 pagine molto eterogenee nel contenuti e quindi necessariamente anche nel design.

Uno dei primi temi posti nel gruppo che si occupa del front end del portale, inteso come grafica e User Interface, è stato come coniugare due elementi. Da un lato la grande varietà di contenuti che andranno a popolare le pagine del Portale e quindi la necessità di disegnare pagine anche molto differenti tra loro. Dall’altro offrire agli utenti un ambiente unico, in cui l’esperienza visiva e di utilizzo delle funzioni sia uniforme in tutte le pagine.

La risposta che abbiamo trovato è l’approccio del Design System e in particolare la metodologia dell’Atomic Design proposta da Brad Frost nel 2013. Inseriamo alla fine di questo post alcuni riferimenti di siti o articoli descrittivi di queste metodologie, raccontiamo in questo post come all’interno del nostro progetto le abbiamo utilizzate.

I ruoli

In estrema sintesi, l’Atomic Design prevede di pensare alle interfacce come distribuite su 5 livelli:

  • atomi
  • molecole
  • organismi
  • templates
  • pagine
Livelli Atomic Design
tratta da http://bradfrost.com/blog/post/atomic-web-design/

Il livello atomico è quasi esclusivamente grafico perché si compone di micro-elementi html e icone. Questa parte del lavoro è quindi quasi esclusivamente visual e di pertinenza dei grafici.

Per la progettazione dei layout delle pagine serve definire molecole, organismi e templates. Questa attività è in carico al team UX del progetto.

Infine, la creazione delle pagine sarà in carico alla redazione centrale e alla redazione distribuita del Portale, con un affiancamento del team UX o una formazione specifica precedente.

Come stiamo lavorando

Nella prima fase di lavoro stiamo quindi definendo molecole, organismi e templates. Utilizziamo delle pagine dell’attuale sito per censire contenuti e funzioni e con una modalità di lavoro circolare tra i diversi livelli definiamo le nostre componenti. Gli obiettivi di questa fase sono:

  • individuare tutti elementi base (molecole e organismi) necessari
  • utilizzare un numero di elementi ridotto al fine di semplificare lato implementazione e costruire un ambiente omogeneo per l’utente
  • lavorare su le variabili interne agli elementi disegnati, per moltiplicare le possibilità grafiche ma restando in una UI coerente e semplificando la gestione di back end
  • costruire una serie di template validi per le differenti tipologie di pagina che immaginiamo

Sono esempi di elementi da noi disegnati:

Grafica di un box con link
Molecola: un box con testo e link
Esempio di organismo
Organismo: un accordion con all’interno altri elementi

Questi elementi vengono poi presi dai grafici e, partendo dalle scelte fatte per gli atomi (font, colori, bordi, etc), vengono messi in grafica e scritti in html

Grafica di un elemento
Esempio di passaggio dalla bozza all’elemento in grafica

Risultati attesi

Il progetto prevede di avere al termine dei lavori del gruppo UX e Grafica:

  • il disegno dei contenuti atomici realizzato secondo la grafica del portale
  • un serbatoio di molecole
  • un serbatoio di organismi
  • una serie di template (home page di sezione, landing page, pagina di contenuto)

Il passaggio successivo sarà quindi di offrire questi elementi ai redattori e utilizzarli per costruire le pagine: abbiamo infatti verificato come questo approccio si riveli anche molto funzionane nel lavoro di co-progettazione fatto con i possessori dei contenuti. Partendo dal template più adatto, in base al contenuto da inserire si seleziona la molecola o l’organismo tra quelli disponibili e pezzo dopo pezzo si costruisce la pagina: lavorare con i redattori utilizzando subito questi elementi grafici pre-costruiti semplifica e velocizza le attività.

Fonti e approfondimenti

A comprehensive guide to design system di Will Fanguy, Invisio
Atomic Design di Brad Frost
Atomic design: how to design systems of components di Audrey Hacq
Cos’è l’Atomic Design e come creare interfacce coerenti di Paul Jesus Benites Romero

Pubblicato il

Tanti livelli, tanto lavoro

Stiamo lavorando molto, la costruzione di un Portale di Ateneo completamente nuovo è un progetto complesso e richiede molte energie. Anche per questo non riusciamo ad aggiornare con frequenza questo blog.

Questo post vuole dare una panoramica su quanto stiamo facendo raccontando i 4 livelli su cui stiamo lavorando.

1. L’ecosistema web di Ateneo

Come già in parte raccontato è in corso un profondo cambiamento nel sistema di siti che costituiscono il mondo Unimi.

Ormai 9 mesi fa abbiamo pubblicato La Statale News, uno spazio nuovo e completamente dedicato alla comunicazione istituzionale di Ateneo, prima inclusa nel Portale.

In ottica di una migliore integrazione dei contenuti entreranno invece nel Portale elementi che ora sono esterni, quali i siti delle Facoltà/Aree di studio e il sito del Centro di Servizio di Ateneo per l’Orientamento allo Studio e alle Professioni (COSP).

Nasceranno inoltre nuovi ambienti dedicati ai Docenti e ai Corsi di Studio, nell’ottica di un luogo sempre più rivolto agli studenti.

2. L’Architettura Informativa

Abbiamo già affrontato il tema dell’Architettura Informativa parlando della funzione dei percorsi di navigazione. A seguito di quel lavoro abbiamo ridefinito tutta l’AI del Portale attraverso l’analisi dei dati relativi all’attuale sito, un intenso lavoro di progettazione interna alla redazione centrale e attività di confronto e co-progettazione con i numerosi stakeholder.

3. Design delle pagine

Il Portale www.unimi.it ha 11 anni, e si vede! Abbiamo sempre cercato di avere un sito pienamente accessibile e recentemente abbiamo migliorato sensibilmente la sua usabilità da dispositivi mobili; certo, abbiamo voglia pagine più belle, attuali, leggere e usabili. Stiamo quindi lavorando sul design, inteso come grafica ma ancor prima come organizzazione dei contenuti e User Interface. Lavoriamo con un approccio di Design System e con il pensiero costante che bello, accessibile e usabile siano un tutt’uno.

4. I contenuti

Abbiamo definito il sistema complessivo, come organizzare le informazioni e come disegnare le pagine. Il tutto per arrivare all’ultimo livello, che in realtà è quello che per noi conta più di tutti: quello dei contenuti.

A questo livello abbiamo due realtà distinte. Da un lato i contenuti inseriti redazionalmente: parole da scrivere in modo chiaro e ben strutturato, questo è il compito dei Redattori Unimi. Dall’altro i contenuti che arrivato automaticamente grazie all’integrazione del Portale con i tanti sistemi gestionali che stanno nel back-end di un grande Ateneo: orari, programmi, tasse, indirizzi, crediti formativi, etc. Si tratta di moltissimi dati che vanno orchestrati e gestiti correttamente per dare sempre informazioni corrette ed aggiornate ai nostri utenti.

Avanti così

Quattro livelli su cui lavorare. Lo stiamo facendo tenendoli uniti, perché le dipendenze sono assolute, coinvolgendo i nostri interlocutori, alternando fasi divergenti e convergenti per ogni sottoprogetto.

Avanti così, vi terremo aggiornati.

Pubblicato il

Percorsi semplici presuppongono architetture complesse

Contributo al blog di Maria Cristina Lavazza

I portali di una grande università sono, a livello di architettura, tra le sfide più complesse da affrontare.
La complessità nasce dal fatto che l’informazione ha viste e variabili numerose e gli stessi attori che prendono parte al sistema sono portatori di interessi e valori differenti.
La difficoltà di rappresentazione dell’informazione si attesta nel fatto che sono rari i siti di grandi università nazionali e internazionali realmente efficaci.
È evidente che ogni scelta offerta risente delle caratteristiche intrinseche a una specifica realtà, ma c’è un passaggio chiave che segna la posa della prima pietra di ogni architettura complessa: la definizione della funzione dei percorsi di navigazione.

È il processo che il progetto del portale della Statale sta attraversando in questa fase: dopo la cristallizzazione degli obiettivi chiave che hanno definito le funzioni primarie del portale, il ragionamento si è spostato sulla struttura di navigazione di accesso alle informazioni.
Ogni struttura di navigazione ha una sua specifica funzione che risponde a domande chiave:
A cosa serve? Cosa racconta voce dopo voce nella sua narrazione? A chi ci rivolgiamo? Con quale scopo?

Per parlare a persone diverse bisogna usare lingue diverse?
No, bisogna inventare nuovi linguaggi.

Architettura Informatica unimi.it

Per realtà digitali complesse come quelle universitarie che fondono bisogni didattici con aspetti pratici e necessità amministrative, è necessario interrogarsi sull’alternativa tra una gerarchia di menu di navigazione tradizionali (uno primario e vari menu a supporto) e l’offerta modulare di menu a faccette (per funzioni, destinatari e necessità diverse).
Questa ultima opzione apre a scenari meno prevedibili e sicuramente più complessi per la progettazione: i multi-menu di navigazione permettono un recupero dell’informazione partendo da inquadrature e bisogni differenti, ma costringono a risolvere problemi di contestualizzazione e memorizzazione dei percorsi: le persone possono ottenere la stessa informazione in cornici e aree differenti.

Uscire dagli schemi, come team e come professionisti

Questo è il nostro obiettivo primario di questa fase.

Immagini di personas per unimi.it

Ripensare le logiche di navigazione significa re-inquadrare ogni singola informazione secondo schemi centrati sulle persone: Quali sono i modelli mentali degli studenti? Come ragionano? Dove e come cercano le informazioni? Come si muovono? Cosa vogliono vedere prima? Cosa leggono, ma soprattutto cosa non leggono?

Questo, come team, ci costringe a interrogarci rispetto alle informazioni realmente necessarie e alla loro modalità di erogazione. Anche in questo caso la funzione riveste un ruolo chiave: questa informazione serve o è superflua? È efficace in questa determinata area? Quanto è importante darla in questo momento?

L’architettura informativa ripensata secondo tali logiche necessita di scelte molto più nette: oggi abbiamo infatti sempre più coscienza che le informazioni devono essere meno, più leggere, ma sempre più contestualizzate all’area di riferimento, alla persona e al percorso con le quali vengono raggiunte.

Stiamo costruendo un’architettura dove le persone potranno abitare comodamente, confortevole, pratica e che possa essere in armonia con l’ambiente circostante.
Tutto questo richiede una progettazione critica e attenta che va molto oltre la scelta di una etichetta o la collocazione di un singolo contenuto.

 

Pubblicato il

Tempo di kick off, che tutto abbia inizio

Scelta degli obiettivi e del partner tecnologico del nuovo portale unimi.it, cambiamento dell’ecosistema web d’Ateneo, presentazione del metodo e del piano di lavoro che ci attendono nei prossimi 16 mesi.

Sono alcuni dei passaggi più significativi dell’incontro di kick off del 31 maggio con cui abbiamo presentato “ufficialmente” a Rettore, Direttore Generale e rappresentanti della comunità universitaria – docenti, ricercatori, tecnici, amministrativi, studenti e dottorandi – il progetto che ci condurrà – a ottobre 2018 – al golive del nuovo portale unimi.it.

Direttore Generale presenta il progetto

Un progetto – per usare le parole del Direttore Generale, Walter Bergamaschi, intervenuto nei saluti introduttivi – che non può prescindere dal lavoro di squadra in cui ognuno di noi è chiamato a giocare un ruolo, nonostante le difficoltà tipiche di processi complessi come quello di ridisegnare un portale web ricco di contenuti da ripensare nell’ottica dei bisogni dei nostri utenti e stakeholder, presenti e futuri.

Dirigente Divisione Sistemi Informativi presenta il progetto

Tra gli obiettivi del nuovo portale – richiamati da Luisa Ferrario, Dirigente della Divisione Sistemi informativi – non possono che esserci la centralità dell’offerta formativa e dei servizi agli studenti, l’attenzione al canale mobile e la scelta di un look&feel subito riconoscibile, che comunichi autorevolezza.

Obiettivi molteplici che potranno essere portati a sistema solo se il nuovo portale unimi.it sarà costruito e vissuto come punto di riferimento “centrale” per tutti i flussi e i processi di comunicazione interna ed esterna del nostro Ateneo.

Basta citare qualche numero per avere, in un colpo d’occhio, una fotografia della molteplicità di contenuti, messaggi, mezzi e target che ‘vivono’ quotidianamente il nostro ecosistema web.

Ad oggi il solo portale unimi.it è fatto di 5.441 pagine, 12.230 documenti (pdf e word), 2.150 news e avvisi, e può vantare 4,2 milioni di visitatori che, in linea con i trend della navigazione online – per il 70% atterrano su una nostra pagina o documento direttamente da un motore di ricerca (Dati Google Analytics: maggio 2016-maggio 2017).

Grafica sui numeri del portale unimi.it

Ridisegnare unimi.it significa, quindi, passare da un “arcipelago” di siti, circondati da un “mare” di applicazioni e gestionali, a un ecosistema web che – mettendo al centro i bisogni dello studente – vedrà unimi.it da una parte acquisire e ricomprendere contenuti oggi “dispersi” nei siti di facoltà, corsi, Cosp e docenti – e dall’altra riservare la comunicazione al personale a un’area Intranet e quella istituzionale e promozionale al nuovo magazine “LaStataleNews”.

Grafica sul nuovo ecosistema web Unimi

Il progetto del nuovo portale unimi.it porta con sé anche una rilevante evoluzione tecnologica, in termini di scelta del Consorzio Cineca, come partner, e di Drupal 8, come CMS,  un Content Management System open source già utilizzato dal 28% degli Atenei nel mondo.

Evoluzione tecnologica significa, però, anche aggiornamento delle nostre competenze interne, introduzione di novità mutuate dal service design, ma soprattutto la costruzione di un modello di governance web, redazionale ed editoriale, più efficace.

Partecipanti alla presentazione del progetto

Co-progettazione, test con gli utenti e costruzione di una community che “sperimenti” con noi la bontà degli oggetti via via rilasciati – architettura informativa, applicazioni, percorsi guidati – e che continui a collaborare con noi anche dopo il golive, sono i capisaldi del nostro metodo di lavoro, a cui chiunque, anche esterno all’Università Statale, potrà prendere parte, con suggerimenti, segnalazioni o semplici opinioni.

Al calcio di inizio segue la partita, con i suoi tempi e le sue azioni di gioco.
Vi aspettiamo in campo!

Pubblicato il

unimi.it all’Open Day

Open Day 2017, la giornata in cui apriamo le porte ai ragazzi delle scuole superiori per presentare l’offerta didattica e i servizi dell’Università Statale.

Un’occasione importante anche per il nostro progetto, l’opportunità di incontrare quelli che tecnicamente si chiamano “prospect”, i futuri studenti.

Poster stand nuovo portale Open Day

Nel corso della giornata abbiamo trovato molti ragazzi disponibili e li abbiamo coinvolti in una serie di attività.

Anzitutto per tutti un breve questionario sulla loro esperienza con l’attuale portale, e le impressioni riportate sono state migliori di quanto ci aspettassimo. Il portale viene valutato come complesso ma alla fine efficace, le informazioni sono tante e spesso caotiche, ma si trovano.
Un dubbio: i ragazzi delle superiori sono gentili e non vogliono parlare male del nostro portale oppure per un prospect effettivamente svolge il suo dovere?
Lo scopriremo con ulteriori indagini.

Secondo passo, abbiamo coinvolto i ragazzi in due attività.
Per alcuni il testing di una nuova procedura di registrazione al portale: un classico user test su un prototipo utile per evidenziare alcuni elementi da migliorare, in particolare testi e funzionalità.

Altri ragazzi sono stati invece coinvolti in attività di card sorting per verificare alcune ipotesi di architettura informativa da noi elaborate in precedenti attività.

attività di card sorting

Abbiamo impostato un  card sorting chiuso al mattino, mentre nel pomeriggio abbiamo lasciato più libertà ai partecipanti proponendo un card sorting aperto: risultati interessanti, per le scelte fatte sulle 19 carte ed anche per idee e commenti emersi durante le attività.

Gli elementi che ci hanno più colpito? Molti ragazzi hanno ragionato seguendo una logica principalmente temporale, partendo anzitutto dalla distinzione “prima della scelta del corso di caurea” e “dopo aver scelto”. Secondo aspetto, i luoghi sono molto importanti: avere subito chiaro dove si svolgono le lezioni è un elemento valutato come fondamentale.

A conclusione di ogni lavoro, assieme ai ringraziamenti, abbiamo chiesto la disponibilità ad essere inseriti in un elenco di possibili futuri collaboratori per attività di co-progettazione o testing: stiamo costruendo la nostra community allargata per ridisegnare assieme unimi.it!

Una giornata sicuramente impegnativa per noi, ma è stato bello viverla assieme ai colleghi delle altre strutture della Statale e che ha portato dei risultati utili al nostro progetto.

E un grazie particolare ai ragazzi che ci hanno aiutato!