MOSAIC Wheel/
Progettazione e sviluppo della versione digitale interattiva della MOSAIC Wheel, uno strumento visuale pensato per raccontare attività, risultati e impatto del progetto europeo MOSAIC. La ruota originale è stata trasformata in un’interfaccia esplorabile attraverso rotazione, trascinamento e ingrandimento dei contenuti, mantenendo la struttura grafica del progetto e rendendola utilizzabile direttamente sul web.
Il punto di partenza era un artefatto grafico complesso: una grande ruota composta da livelli concentrici, spicchi, testi e contenuti differenti.
La versione statica, in pdf, permetteva di osservare la struttura complessiva del progetto, ma diventava difficile esplorarne i dettagli, soprattutto quando la quantità di informazioni aumentava o quando il contenuto veniva visualizzato su uno schermo di dimensioni ridotte.
La sfida era quindi trasformare questa rappresentazione in uno strumento digitale realmente navigabile, senza semplificarne eccessivamente la struttura e senza perdere la relazione visiva tra attività, risultati e impatto.
Era inoltre necessario progettare modalità di interazione abbastanza intuitive da permettere all’utente di muoversi all’interno della ruota, ruotarla e approfondire i singoli contenuti senza sovraccaricare l’interfaccia di comandi.
Ho sviluppato un plugin WordPress custom capace di trasformare la MOSAIC Wheel in un componente interattivo integrabile direttamente nel sito del progetto.
La ruota può essere ruotata dall’utente per esplorare progressivamente le diverse sezioni e può essere trascinata all’interno dell’area di visualizzazione per raggiungere anche le parti che, durante l’ingrandimento, escono dal viewport.
Ho introdotto modalità di interazione distinte per evitare conflitti tra le diverse azioni. Attraverso i controlli dedicati, l’utente può scegliere se utilizzare la modalità Rotate oppure attivare Zoom text per approfondire i contenuti presenti nei singoli segmenti.
Una parte significativa del lavoro ha riguardato la gestione geometrica della ruota e dei suoi spicchi, correggendo problemi di ritaglio, posizionamento e visualizzazione degli elementi e adattando il comportamento dell’interfaccia alle diverse dimensioni dello schermo.
Il risultato è un componente che conserva l’identità della ruota originale ma aggiunge un nuovo livello di fruizione, trasformandola da immagine da osservare a strumento da esplorare.
- Visualizzazione interattiva della MOSAIC Wheel
- Rotazione della ruota tramite interazione dell’utente
- Modalità Rotate dedicata
- Rotazione tramite click sulla ruota
- Trascinamento della ruota
- Spostamento libero della ruota all’interno dell’area di visualizzazione
- Modalità Zoom text dedicata
- Ingrandimento dei testi presenti negli spicchi
- Selezione delle diverse modalità di interazione
- Controlli posizionati sopra la ruota
- Gestione dei singoli spicchi
- Visualizzazione completa degli spicchi senza ritagli
- Gestione dei diversi livelli concentrici della ruota
- Esplorazione delle Activities
- Esplorazione dei Results
- Esplorazione dell’Impact
- Navigazione visuale tra le diverse sezioni
- Adattamento responsive
- Gestione dell’interazione tramite mouse
- Gestione dell’interazione su dispositivi touch
- Integrazione tramite plugin WordPress custom
- Integrazione della ruota nel sito MOSAIC
- Collegamento dalla Home alla pagina dedicata alla Wheel
Il progetto ha richiesto di trattare la ruota non come una semplice immagine, ma come una superficie interattiva composta da elementi indipendenti.
Una delle prime difficoltà è stata mantenere la precisione della composizione originale: alcuni spicchi, durante le trasformazioni, potevano essere parzialmente tagliati o uscire dall’area visibile.
Ho quindi lavorato sulla geometria del componente, sui contenitori e sulle trasformazioni CSS e JavaScript affinché rotazione e spostamento non alterassero la struttura della ruota.
Un secondo problema riguardava l’interazione. Rotazione, trascinamento e zoom richiedono gesti molto simili e, se attivati contemporaneamente, possono entrare facilmente in conflitto.
Per questo ho introdotto modalità esplicite: quando è selezionato Rotate, l’interazione con la ruota controlla la rotazione; quando viene attivato Zoom text, la stessa interfaccia assume una funzione diversa e permette di concentrarsi sui contenuti.
Lo sviluppo è avvenuto attraverso un processo iterativo: test dell’interazione, individuazione dei problemi, correzione e nuova verifica, fino a rendere il comportamento coerente con il modo in cui una persona tende naturalmente a manipolare un oggetto visuale.
L’intelligenza artificiale è stata utilizzata come supporto alla prototipazione, al debugging e alla revisione progressiva della logica JavaScript, mantenendo il controllo diretto sull’esperienza e sul comportamento finale del componente.
La MOSAIC Wheel è diventata da elemento grafico statico un vero strumento digitale di esplorazione.
L’utente può osservare prima la struttura nel suo insieme e successivamente intervenire direttamente sull’interfaccia per ruotare, spostare e approfondire le diverse parti della ruota.
La relazione tra Activities, Results e Impact rimane immediatamente percepibile, mentre le funzionalità interattive consentono di accedere anche alle informazioni che sarebbero difficili da leggere all’interno di una rappresentazione statica molto densa.
Il progetto mostra anche un aspetto che considero centrale nello sviluppo di strumenti digitali: l’interazione non viene aggiunta come effetto visivo, ma nasce da un problema concreto di accessibilità e navigazione dell’informazione.
È un esempio di come un artefatto progettato originariamente per la comunicazione visuale possa essere reinterpretato per il web e trasformato in un’interfaccia che l’utente può manipolare direttamente.
Da artefatto grafico a interfaccia
La MOSAIC Wheel nasce come una rappresentazione visuale nella quale diverse categorie di informazioni convivono all’interno della stessa struttura circolare. Una ruota molto grande e ricca di informazioni funziona bene quando viene stampata e osservata nel suo insieme, ma cambia completamente comportamento quando deve essere utilizzata all’interno dello spazio limitato di uno schermo.
La soluzione è stata quindi trasformare la rappresentazione stessa in uno spazio navigabile.
Progettare il gesto
Uno degli aspetti più interessanti dello sviluppo ha riguardato il modo in cui l’utente interagisce con la ruota.
Azioni come ruotare, trascinare e ingrandire utilizzano spesso gli stessi input — click, movimento del mouse o gesture touch — e questo può produrre comportamenti ambigui o imprevedibili.
La separazione tra modalità Rotate e Zoom text nasce proprio da questo problema.
Invece di tentare di interpretare automaticamente ogni gesto, l’interfaccia permette all’utente di dichiarare quale tipo di interazione vuole utilizzare. Il risultato è un comportamento più controllabile e comprensibile.
Interazione come accesso all’informazione
Rotazione e zoom potrebbero sembrare inizialmente effetti grafici, ma nel progetto svolgono una funzione precisa: la ruota, infatti, contiene una quantità di informazioni che non può essere mostrata contemporaneamente con la stessa leggibilità su qualsiasi dispositivo.
Le interazioni permettono quindi di alternare due livelli di lettura: la visione complessiva della struttura e l’esplorazione del dettaglio.
È questa relazione tra rappresentazione visuale e navigazione dell’informazione a rendere la MOSAIC Wheel interessante come prodotto digitale, più che come semplice animazione.