Caso di studio: il sito dei Nidi Intercomunali isontini

Stavolta parliamo di un nostro progetto. Il sito web dei nidi intercomunali è infatti un lavoro recentemente eseguito che ha alcune caratteristiche che lo rendono interessante. E’ un buon esempio di come si può costruire un piccolo sito in maniera efficente ed economica, senza necessità di test di usabilità dato il piccolo budget, e rispettando semplicemente alcune linee guida.

Il cliente e gli obiettivi

I nidi intercomunali sono asili nido gestiti da un consorzio di comuni nella provincia di Gorizia, ma a gestione privata. L’obiettivo del sito è quello di offrire un nuovo canale di informazione da parte del consorzio verso i genitori. Questo dovrebbe semplificare per esempio lo scaricamento di alcuni moduli per la preiscrizione e l’iscrizione, consentire di rimanere aggiornati su novità importanti e trovare informazioni su orari, regolamento, menu per i bimbi e attività previste.

I genitori (quelli che rilasciano le liberatorie, almeno) hanno naturalmente anche il piacere di vedere i loro bimbi in azione: un caso in cui la galleria d’immagini è davvero centrata sull’utente, in tutti i sensi.

Un sito così non ha bisogno di molte pagine di contenuti, e può dunque vivere di un unico menu, che, dato il numero di voci comunque attorno alla decina, è preferibile di tipo verticale. La home page è particolarmente importante, perché deve assolvere da sola alle più importanti funzioni del sito:

  1. Presentare il sito e i Nidi (identità)
  2. Consentire di identificare rapidamente le ultime iniziative
  3. Consentire di scaricare rapidamente i documenti più recenti
  4. Consentire ai genitori di iscriversi alla newsletter per rimanere informati.

La divisione della home page in aree è dunque scaturita in maniera abbastanza naturale da questa quadripartizione. Ogni area distinta assolve ad una specifica funzione, senza ostacolare le altre. Il tutto è visibile semplicemente, alle risoluzioni più comuni anche da utenti poco evoluti (che navigano a 800 × 600).

Immagine e comunicazione

Un sito usabile deve anche essere piacevole da vedere. Il target, non aziendale, e il tema legato all’infanzia, ha spinto verso scelte colorate. L’uso dei bordi arrotondati ricorda i giocattoli sicuri e aggiunge un tono di morbidezza ad un insieme cromaticamente allegro. Le foto usate (fin dalla home page) dovevano rafforzare questo senso di allegria.

I colori e l’accessibilità

Forse il punto più critico per un sito colorato che rispetta la legge 4/2004 è quello di trovare colori che siano sufficientemente contrastati per l’algoritmo usato dalla legge. Benchè l’algoritmo sia tutt’altro che scientifico per tutelare i disabili visivi, esso è pur sempre il riferimento normativo da rispettare. Tutti i contrasti di colore sono stati scelti per rispettare la legge, e per armonizzarsi con il colore di sfondo scelto. La scelta alla fine è stata assai apprezzata: siamo riusciti a conciliare un’elevato contrasto con colori diversi dal bianco e dal nero in tutto il sito.

Il logo

Il logo è una creazione originale, fatta per complementarsi con il tono visivo dell’insieme, suggerendo il senso della crescita e un generale clima di allegria e di freschezza.

L’uso di javascript

Javascript è stato usato nell’unica maniera possibile su un sito accessibile: in maniera non intrusiva, per aggiungere comodità piuttosto che per assolvere funzioni complesse. Ci sono in particolare tre usi di javascript nel sito:

  1. Per un effetto morbido di rollover dei loghi dei comuni nella testata. La richiesta dei loghi appartiene ai vincoli del progetto, ma non sono chiaramente un contenuto informativo di qualche interesse per un cieco. Inoltre il loro inserimento in pianta stabile nel progetto visivo della pagina avrebbe comportato qualche problema di equilibrio. Questa soluzione a comparsa accomoda solo i vedenti che hanno javascript attivo, aggiungendo pure un piacevole effetto di dissolvenza. Ma le informazioni e le funzionalità (i link ai siti dei comuni) sono attive per tutti, rendendo così la soluzione un buon esempio di “progressive enhancement”.
  2. Per facilitare la lettura dei dati in tabella, con un effetto di hover qualora con il cursore ci si posizioni su una cella delle tabelle. Anche in questo caso, l’effetto è solo migliorativo e per nulla indispensabile, né per chi ha javascript disattivo, né per i ciechi.
  3. Nelle gallerie di immagini. Le gallerie di immagini sono arricchite da un effetto lightbox, peraltro attivabile anche da tastiera, come richiede il requisito 15. Tuttavia, le gallerie sono pure utilizzabili se javascript non è attivo, secondo una modalità server-side, anziché client-side. L’implementazione (in questo caso una funzionalità vera e propria) è cioè ridondante, in modo da rispettare il requisito 16.

Lezioni apprese

Il sito ha avuto un ottimo riscontro da parte del cliente e degli utenti, e ne siamo legittimamente orgogliosi, perché dimostra che è possibile creare un sito accessibile e piacevole da vedere, con un budget ridotto e seguendo pratiche euristiche di usabilità.

E’ certo che ci sono possibilità di miglioramento che sarebbero venute dall’esecuzione di test. Ma ottenere un sito accessibile, piacevole e facile da usare a basso costo testimonia che l’usabilità ha diverse frecce al suo arco, per una serie di budget tra le più varie