Lesson Learned: La nostra esperienza nella progettazione di un modello di sito web

Un modello di sito, o template, è un insieme predefinito di elementi di design, layout e funzionalità utilizzabili come base per la creazione di uno o più siti web. Questi modelli forniscono una struttura di base personalizzabile per soddisfare le esigenze di enti o business dello stesso settore.

Tipicamente, questi prodotti propongono diverse tipologie di template di pagina utili per la costruzione dell’intero sito, come l'homepage, pagine di primo e secondo livello fino ad arrivare alle pagine foglia.

Progettare un modello di sito presenta diverse difficoltà, tra cui integrare in un solo prodotto tutte le necessità di diversi stakeholder. Tuttavia, adottare un modello permette di risparmiare tempo e risorse se si lavora su progetti simili o si desidera creare una serie di siti con un aspetto e una struttura coerenti.

Caratteristiche generali di un modello di sito

La progettazione di un modello di sito segue le stesse fasi di un sito custom, le differenze sostanziali risiedono nei principi che guidano la progettazione stessa:

• Flessibilità: Deve adattarsi alle necessità di diversi enti, permettendo modifiche nei layout e nelle funzionalità.
• Scalabilità: Progettato per essere utilizzato da più business, mantenendo la possibilità di personalizzazione per ciascuno.
• Adattabilità: Include sezioni modulari che possono essere attivate o disattivate in base alle esigenze specifiche dell'ente.

Un modello di sito quindi segue gli stessi step di progettazione di un sito custom, ma è guidato da principi diversi che lo rendono adattabile a più enti.

Un sito custom è strutturato nel suo layout e nelle sue funzionalità esattamente sulla base delle specifiche esigenze e bisogni intercettati dal business e dai suoi utenti di riferimento grazie alla fase di ricerca. In generale, in questi casi si parla di una progettazione B2C (Business to Consumer), ovvero una progettazione effettuata in collaborazione con il business ma direttamente orientata al consumatore finale.

Un modello di sito, invece, è tendenzialmente progettato per adattarsi alle necessità di più enti, generalmente operanti nello stesso settore o contesto. Deve quindi adattarsi nei suoi layout e funzionalità a una rosa di scenari molto più ampia e variegata. Viene realizzato con l’idea di base che il business possa farlo suo, diventando parte della progettazione del prodotto finale adattando i template proposti ai contenuti che desidera e ha bisogno di comunicare ai suoi utenti finali. In questo caso possiamo parlare di una progettazione B2B2C (Business to Business to Consumer), ovvero una progettazione rivolta a più business che potranno poi rielaborare il modello proposto sulla base delle loro esigenze per rivolgerlo poi alla loro utenza.

Questo aspetto si riversa anche nell’output finale che viene consegnato alla fine della progettazione di un modello. Mentre un sito custom viene rilasciato come prodotto finito, un modello di sito è rilasciato a uno stadio precedente, richiedendo un’analisi dei contenuti per adattare i template proposti alle esigenze comunicative del business.

Coinvolgimento degli stakeholder

La progettazione di un modello di sito è legata al soddisfacimento dei bisogni di una vasta platea di utenti e di stakeholder (enti, fornitori IT), che possono avere caratteristiche molto diverse tra loro. È necessario coinvolgerli il più possibile, definendo momenti di ricerca, confronto e raccolta feedback per ottenere le informazioni necessarie alla progettazione e validare le scelte progettuali lungo il cammino.

Questi momenti di confronto possono coincidere con le fasi cruciali del progetto:

• Fase iniziale: Raccogliere bisogni informativi e operativi, vincoli e richieste specifiche da considerare.
• Dopo la progettazione dell'architettura informativa e dei flussi di navigazione: validare la coerenza del metodo di organizzazione delle informazioni e l'intuitività dei percorsi di navigazione proposti.
• Dopo la progettazione dell’interfaccia: Validare la struttura dei template e verificare se soddisfano le esigenze comunicative degli stakeholder.

La possibilità di avere questo continuo confronto con stakeholder e utenti permette di procedere in maniera informata e risolvere velocemente eventuali problematiche che possono emergere durante la progettazione.

Flessibilità dell'architettura dell'informazione

La parola chiave nella progettazione dell'architettura dell'informazione è flessibilità.

Di quante e quali voci di primo livello potrebbe aver bisogno l’ente più complesso con molti contenuti da organizzare?
Di quante e quali voci di primo livello potrebbe invece aver bisogno un ente più piccolo con meno contenuti da proporre?
Ci sono sezioni che potrebbero essere accese o spente sulla base della necessità senza distruggere il flusso logico della navigazione?

Queste sono alcune delle domande principali che ci siamo posti quando ci siamo ritrovati a doverci interfacciare con la definizione dell'architettura informativa di un modello.

La lezione appresa è che generalmente la soluzione migliore è prevedere voci di primo livello che possano adattarsi a ogni ente, a prescindere dalla quantità di contenuti da intermediare tramite il sito. Lasciare più flessibile la gestione dei livelli successivi permette a chi deve adottare il modello di avere granularità e tipologie di contenuti differenti a seconda delle proprie necessità.

Progettare layout adattabili e modulari 

Anche la progettazione dei layout di pagina deve essere sempre orientata alla flessibilità. Il modello deve adattarsi a realtà di dimensioni potenzialmente molto diverse, che possono avere più o meno contenuti da divulgare.

Una buona pratica è progettare i template di pagina in modo modulare, prevedendo diverse sezioni e, se necessario, sottosezioni, che possano essere accese o spente in base alla tipologia e alla quantità di contenuti da intermediare. Ci sono tuttavia delle sezioni dei template che sono necessarie affinché la pagina abbia senso di esistere e di essere implementata.

Un ulteriore suggerimento è ragionare per worst ed edge cases, chiedendosi sempre quali potrebbero essere i casi peggiori e simulando come potrebbero configurarsi le pagine template con contenuti minimi e massimi. Il benchmark può essere utile anche in questo caso, permettendo di individuare esempi di contenuti per testare le pagine dei template realizzati.

Progettare in ottica mobile first e dare indicazioni per tablet e desktop è una buona pratica che permette di non dover disegnare tutte le viste in tutti i formati, ma di presentare il progetto in un formato unico affiancato da casi singoli di particolare rilevanza.

Coerenza del design e documentazione

Un modello di sito deve garantire coerenza nel design e nell'esperienza utente, mantenendo un'immagine di brand uniforme. La documentazione chiara e completa è fondamentale per aiutare chi utilizza il modello a costruire il sito finale e deve includere:

• Regole di progettazione: Principi seguiti e processo di realizzazione.
• Descrizione delle sezioni e delle interfacce: Funzionalità e struttura generale.
• Dettagli tecnici: Funzionamento delle interazioni, animazioni e comportamenti dei vari elementi.

Realizzare modelli di sito flessibili e scalabili

Ogni fase della progettazione del modello ricopre un ruolo cruciale affinché il prodotto finale non solo risponda alle esigenze dei clienti, ma offra la possibilità a questi di costruirsi il proprio sito in modo da offrire un'esperienza utente coerente e intuitiva.

Attraverso una collaborazione attiva e una comunicazione chiara con gli stakeholder, è possibile raccogliere insight preziosi che si traducano poi in layout e template che rispecchino i bisogni emersi dalla ricerca. L'attenzione ai dettagli nella progettazione degli elementi di UI assicura che ogni interazione con il sito derivato dal modello sia piacevole e funzionale. 

Infine, la stesura di una documentazione chiara e completa supporta chi implementa il sito nell’impostazione di un’esperienza di fruizione coerente ed efficace.