Path: Home | Publications | Manuale | Indice | Appendice 3

Manuale per la qualità dei siti Web pubblici culturali

Catalogo dei Pattern
a cura di Mario Didomenicantonio

1 Far percepire i contenuti

1.1 Struttura del sito
1.2 Aggregare informazioni rilevanti
1.3 Nome significativo
1.4 Struttura della pagina
1.5 Home page
1.6 Home page secondaria
1.7 Selettore di lingua
1.8 Mappa del sito
1.9 Novità
1.10 Chi siamo
1.11 Modalità d’uso

2 Presentare i contenuti

2.1 Facilitare la lettura
2.2 Informazione ridondante
2.3 Geometria variabile
2.4 Paginazione
2.5 Versione stampabile

3 Far navigare il sito

3.1 Punti di riferimento ben definiti
3.2 Sistemi di navigazione
3.3 Navigazione principale
3.4 Navigazione secondaria
3.5 Navigazione contestuale
3.6 Metanavigazione
3.7 Briciole di pane
3.8 Segnalibri affidabili

4 Far effettuare ricerche

4.1 Pagina di ricerca
4.2 Ricerca semplice
4.3 Ricerca avanzata
4.4 Risposte a domande frequenti (FAQ)

5 Interagire con gli utenti

5.1 Form
5.2 Comunicare l’esito
5.3 Login
5.4 Registrazione
5.5 Newsletter

Struttura del sito
Contesto: il sito contiene una grande quantità di informazioni di natura diversa (notizie, documenti, elementi multimediali ecc.). Normalmente non è possibile presentare tutta l’informazione in un’unica pagina e nemmeno presentare in un’unica pagina i collegamenti a tutte le informazioni presenti.
Condizioni: l’utente deve riconoscere l’identità del fornitore delle informazioni; deve conoscere rapidamente il contenuto generale, per poter poi eventualmente accedere ai particolari; deve disporre di contenuti di buona qualità; non vuole perdersi …
Problema: come si può organizzare il contenuto del sito in modo che l’utente ne abbia consapevolezza e possa esplorarlo liberamente, senza dover seguire percorsi obbligati ovvero senza vincoli eccessivi alle proprie scelte?
Soluzione: raggruppare i contenuti in aree che contengono informazioni concettualmente omogenee tra loro.
Si tratta di Aggregare informazioni rilevanti in base a due criteri principali:

• le informazioni aggregate siano concettualmente omogenee tra loro,
• la descrizione del contenuto vada dal generale a particolare.

Si sviluppano aree, sezioni e sottosezioni nelle quali i contenuti si arricchiscono man mano di un crescente dettaglio di informazione. Il criterio della omogeneità del raggruppamento dovrebbe rispecchiare il punto di vista dell’utente, non quello del progettista. L’ordine gerarchico delle informazioni costituisce un aiuto fondamentale alla chiarezza e alla fruibilità del sito. Si costruisce, quindi, una struttura gerarchica al cui vertice c’è l’Home page, che ha la funzione di presentare l’identità del sito ed i suoi contenuti. All’interno della struttura gerarchica vanno inseriti dei Punti di riferimento ben definiti in modo che i Sistemi di navigazione possano aiutare l’utente ad attraversare la struttura stessa anche in modo trasversale: in “larghezza” e non solo in “profondità”. La natura ipertestuale del Web consente all’utente di costruirsi una sua organizzazione concettuale dei contenuti che può anche essere diversa da quella proposta dal progettista.
La Struttura del sito permette, infine, di costruire una Struttura della pagina efficace ed efficiente.
Annotazioni: l’organizzazione dell’informazione di un sito è il lavoro più complesso e delicato di tutta la progettazione. Nei siti pubblici si nota spesso la tendenza a organizzare i contenuti secondo la struttura organizzativa dell’Amministrazione con le sue Direzioni Generali, Dipartimenti, Uffici e ad utilizzare il linguaggio di chi è addetto alla gestione della cosa pubblica. Si dà per scontato che il cittadino utente sia a conoscenza di tutto ciò. Spesso non è così. Inoltre, un argomento può essere di competenza di diverse strutture organizzative all’interno di una Amministrazione: sul sito, invece, bisogna fare in modo che l’utente abbia la possibilità di esaminare l’argomento in maniera completa ed esaustiva, secondo il modello concettuale che egli se ne è fatto.
Pattern correlati: questo Pattern sottende in pratica tutti gli altri essendo quello che definisce la struttura del sito.
Esempi: Tutti i siti Web che funzionano bene.

Aggregare informazioni rilevanti
Contesto: il Web è uno strumento di comunicazione con caratteristiche diverse da quelle della carta stampata, della televisione, della radio.
Condizioni: sullo schermo di un PC l’utente vede molto meno testo di quanto ne possa essere mostrato sulle pagine di un libro o in quelle di un giornale. La natura ipertestuale del Web permette all’utente di fruire dell’informazione in modo non sequenziale, come invece è caratteristico di televisione e radio.
Problema: come adeguare i contenuti alle caratteristiche tipiche del Web e alle modalità con cui gli utenti utilizzano i siti?
Soluzione: organizzare i contenuti in modo tale che siano chiaramente percettibili le informazioni principali da quelle secondarie o di supporto.
Questa operazione è fondamentale per:

• decidere la gerarchia delle informazioni necessaria a impostare la Struttura del sito e la Struttura della pagina;
• costruire il testo in modo che le informazioni rilevanti si trovino all’inizio, immediatamente visibili. Il principio è quello della “piramide rovesciata” in base al quale si parte dalle conclusioni per poi spiegare i motivi.
• realizzare Moduli (Form) efficienti ed efficaci.

La differenziazione dei contenuti può ottenersi anche con il rilievo grafico che si dà agli uni e agli altri.
Annotazioni: —
Pattern correlati: —
Esempi: —

Nome significativo
Contesto: in un sito Web ci sono elementi come il titolo di una pagina (page title), il testo di un collegamento, il titolo del testo di un documento che hanno una grande importanza. Questi elementi sono infatti utilizzati, oltre che per gli scopi propri, anche per navigare il sito, per far percepire i contenuti e per facilitare la lettura delle pagine.
Condizioni: gli utenti costituiscono un pubblico ampio e indifferenziato; non tutti sono in grado di comprendere il significato di termini specialistici, di termini propri del gergo professionale o di parole di uso non comune.
Problema: come descrivere gli elementi importanti in modo comprensibile alla maggioranza degli utenti?
Soluzione: utilizzare parole di uso quotidiano (plain language) e brevi frasi che descrivono cose reali prima che concetti. Si tratta di elaborare piccoli testi (40-60 caratteri) che vanno considerati come veri e propri contenuti (microcontenuti) e che sono utili all’utente per farsi una idea veloce e precisa di ciò che sta consultando. Quindi debbono essere pensati come un vero concentrato di contenuto. In particolare, è necessario:

• dare un titolo significativo e pertinente alla pagina (page title). Esso deve essere specifico e riferirsi al contenuto della pagina corrente e quindi si dovrebbe indicare prima il particolare (la pagina specifica) e poi il generale (il nome del sito). Il titolo della pagina aiuta l’utente nella navigazione perché viene indicato dal browser nell’elenco delle pagine visitate (Bottone Indietro);
• utilizzare il più possibile metafore della vita per descrivere gli elementi dei Sistemi di navigazione. Un collegamento del tipo “Pagare le tasse” è probabilmente più significativo di “Ufficio Tributi”;
• utilizzare l’Informazione ridondante per chiarire meglio la destinazione di un collegamento, anche quando è interno al testo;
• dare titoli significativi al testo di un documento perché essi sono il primo livello di lettura incontrato dall’utente. Essi devono costituire un riassunto brevissimo dell’intero contenuto.
  Il Web ha ormai elaborato una sua forma di scrittura che è diversa da quella utilizzata nei libri e nei giornali, perché sul Web si legge in maniera diversa.

Annotazioni: —
Pattern correlati: —
Esempi: —

Struttura della pagina
Contesto: la pagina è il modo più comune di presentazione dell’informazione contenuta in un sito. Spesso è l’unico modo possibile. Ma, oltre a contenere l’informazione, la pagina deve contenere gli strumenti attraverso i quali l’utente interagisce con il sito: barra di navigazione, collegamenti ad altre informazioni, strumenti di utilità ecc.
Condizioni: l’utente deve poter facilmente accedere alle diverse zone della pagina, il contenuto di una zona deve essere in relazione con quello di un’altra (ad esempio: l’utente vuole avere chiara la relazione tra il contenuto informativo della attuale pagina e il percorso con il quale è arrivato alla pagina stessa).
Problema: come si può organizzare la pagina in modo che l’utente abbia la percezione chiara della differenza tra contenuto informativo vero e proprio e le informazioni di servizio, comprendendo in queste ultime gli elementi di riconoscimento del sito, gli strumenti di navigazione, la pubblicità ecc.?
Soluzione: organizzare tutte le pagine del sito allo stesso modo, con zone ben definite che non si sovrappongano fisicamente né logicamente le une alle altre.
Un modello di Struttura di pagina molto utilizzato è quello che prevede tre zone distinte:

• l’ Intestazione che contiene tutti gli elementi distintivi dell’identità del sito (logo, denominazione ecc.) e in genere è posizionata in alto, a partire da sinistra. In essa sono talvolta inseriti elementi di servizio quali la . Quando si utilizzano immagini per la realizzazione dell’intestazione, queste devono essere corredate di adeguata descrizione testuale. Bisogna utilizzare le immagini solo quando è strettamente necessario perché le immagini mal si adattano alla Geometria variabile con la quale una pagina deve essere realizzata.
• Il corpo della pagina contiene l’informazione vera e propria. Al suo interno, peraltro, possono esserci anche informazioni di servizio del tipo Briciole di pane, indici (Navigazione secondaria), Navigazione contestuale. In pratica, anche il corpo può essere considerato come un’area che può a sua volta essere suddivisa ulteriormente.
• La barra di navigazione (Navigazione principale), infine, contiene i collegamenti immediati alla pagina di ingresso (Punti di riferimento ben definiti) di ciascuna delle altre sezioni in cui il sito è strutturato.

Per quanto riguarda l’aspetto grafico che una pagina dovrebbe avere si consideri che:

• la pagina dovrebbe essere realizzata con Geometria variabile per far fronte all’esigenza dell’utente di modificare a piacimento le dimensioni della finestra del browser e quelle dei caratteri del testo;
• la sequenza reale delle zone dovrebbe essere:
  Intestazione -> Corpo -> Barra di Navigazione
  indipendentemente da come queste si presentano visivamente sullo schermo. Ciò è utile per tutti gli utenti che utilizzano browser testuali o con sintesi vocale. Ci sono diverse tecniche per realizzare questa soluzione;
• deve essere previsto un sistema di navigazione interno alla pagina che consenta di passare da una zona all’altra agli utenti che non dispongono di browser grafici;
• le zone devono essere graficamente ben distinte. Un opportuno uso dei colori di sfondo facilita la loro individuazione.

Le uniche eccezioni a questa omogeneità di presentazione delle pagine (coerenza) possono essere i Punti di riferimento ben definiti che svolgono una funzione particolare.
La Home page del sito vive, in certo senso, di vita propria rispetto alle altre pagine e perciò può presentare una struttura diversa, assolvendo spesso alla funzione di presentazione del sito (una sorta di vetrina di tutto il sito).
Una Home page secondaria può avere un contenuto essenzialmente di servizio: descrizione dei contenuti informativi dell’area, indice delle sezioni sottostanti, Risposte a domande frequenti (FAQ) relative agli argomenti trattati, indicazioni per contattare i referenti ecc.
Annotazioni: —
Pattern correlati: —
Esempi: —

Home page
Contesto: ogni sito Web ha una Home page. Essa rappresenta normalmente il principale punto di accesso al sito ed è anche la pagina più frequentata del sito.
Condizioni: gli utenti devono essere messi in condizione di comprendere se sono capitati nel posto giusto; devono avere una immediata idea dei contenuti e di come questi sono organizzati nel sito; devono avere a disposizione gli strumenti per navigare.
Problema: come realizzare una Home page dalla quale l’utente possa comprendere l’identità del sito, i suoi contenuti e trovare rapidamente ciò che lo interessa?
Soluzione: creare una Home page che presenti il sito agli utenti e che li guidi rapidamente ai contenuti.
La Home page è la pagina più importante del sito. Essa deve assolvere a diversi compiti:

• dare certezza sulla identità del sito. L’utente che intenzionalmente cerca il sito deve avere la certezza di essere capitato nel posto giusto; l’utente che vi capita per caso deve avere subito chiaro chi c’è dietro il sito e quali sono i contenuti che vi può trovare. L’identità può essere manifestata in vari modi: con un buon logo, con un collegamento ben visibile ad una pagina in cui si descrive l’Organizzazione responsabile dei contenuti (Chi siamo);
• far percepire i contenuti del sito. L’utente non trova, in genere, nella Home page ciò che cerca. Va guidato e quindi la Navigazione principale deve essere bene in vista. Un altro importante elemento da presentare in evidenza è la Metanavigazione perché offre funzionalità come la Ricerca, la Mappa del sito che possono essere immediatamente utili;
• stabilire un contatto interattivo con l’utente. Sempre di più nel Web l’utente chiede la interazione diretta con l’Organizzazione che c’è dietro il sito. In Home page va dedicato uno spazio chiaro ed evidente per tutte le funzioni interattive previste (Login, Newsletter…);
• comunicare le novità. La Home page è il posto giusto per annunciare tutte le novità del sito: nuovi documenti, iniziative ecc. Deve essere predisposto uno spazio dedicato alle Novità.
  Spesso le Home page vengono riempite con troppa informazione nella errata convinzione che “essere in Home” significa essere visti. L’esperienza mostra che non è così: troppa informazione significa confusione e l’utente finisce per non vedere quello che gli serve.
  La Home page è una pagina particolare e perciò la sua Struttura di pagina può essere diversa da quella delle altre pagine del sito. Ma la consistenza generale deve rimanere e, quindi, alcuni elementi quali l’Intestazione, la Metanavigazione e la Navigazione principale devono avere lo stesso formato e la stessa posizione che hanno nelle altre pagine.

Annotazioni: —
Pattern correlati: —
Esempi: —

Home page secondaria
Contesto: la struttura gerarchica di un sito può essere costituita da un numero elevato di livelli. Ciascun livello a sua volta può a sua volta contenere numerose sezioni. Non sempre è possibile limitare questa complessità.
Condizioni: l’utente non vuole perdersi; non deve essere costretto a ricordare le ramificazioni della struttura; deve poter fare affidamento su percorsi certi e ben definiti.
Problema: come offrire all’utente descrizioni della struttura che gli consentano di crearsi un modello concettuale del sito?
Soluzione: realizzare delle pagine descrittive dei contenuti della sezione.
Si tratta di vere e proprie home page di sezione che, come la Home page del sito, hanno la funzione di far percepire all’utente i contenuti della sezione, comprese le Novità riguardanti la sezione stessa. Il corpo (Struttura della pagina) di una Home page secondaria dovrebbe contenere la lista delle sezioni sottostanti, con relativo collegamento. Ciascun elemento della lista dovrebbe essere corredato di una breve descrizione dei suoi contenuti. La lista può essere anche l’elenco ordinato dei documenti contenuti nella sezione. Se l’elenco fosse molto lungo, allora nella Home page secondaria si può predisporre un Modulo per consentire la ricerca dei documenti della sezione. In questo caso si deve avvertire l’utente che la Ricerca verrà effettuata solo sui documenti appartenenti alla sezione e non su tutto il sito.
Questa particolare organizzazione della Home page secondaria, unita alle Briciole di pane, permette di offrire all’utente un buon sistema di Navigazione secondaria per esplorare i contenuti di un sito complesso.
Annotazioni: —
Pattern correlati: —
Esempi: —

Selettore di lingua
Contesto: le pagine del sito sono scritte in diverse lingue.
Condizioni: —
Problema: l’utente deve poter scegliere una delle lingue disponibili.
Soluzione: offrire la scelta utilizzando il termine proprio della lingua.
Se, ad esempio, un sito è scritto in italiano e ne esiste una versione in lingua inglese il selettore deve essere “English”, non “Inglese” I Selettori di lingua vanno posizionati in modo evidente nella Intestazione della Struttura di pagina. Se la versione in lingua diversa da quella principale riguarda solo alcune pagine del sito allora il Selettore di lingua va inserito solo in queste pagine e l’utente va avvertito (con il link title, ad esempio) qualora un collegamento porti ad una pagina scritta in lingua diversa.
Non utilizzare le icone con i simboli delle bandiere per indicare il selettore: le bandiere rappresentano paesi, non lingue!
Annotazioni: —
Pattern correlati: —
Esempi: —

Mappa del sito
Contesto: l’informazione contenuta nel sito è organizzata in una struttura gerarchica, costituita da aree e sezioni che sono collegate tra loro secondo criteri scelti dai progettisti. I nomi di sezioni ed aree non sono necessariamente autoesplicativi dei loro contenuti.
Condizioni: l’utente vuole conoscere la struttura del sito che sta navigando, per poter rapidamente decidere dove andare a reperire l’informazione che lo interessa.
Problema: come è possibile aiutare l’utente a navigare nel sito senza perdere l’orientamento?
Soluzione: fornire una mappa del sito.
La Mappa del sito dovrebbe essere sempre rapidamente raggiungibile: per questo è opportuno che possa essere consultata in ogni pagina e va inserita nella Metanavigazione.
Annotazioni: Quando un sito ha una organizzazione complessa della informazione, cioè aree che sottendono molte sezioni le quali a loro volta sottendono sottoaree o numerosi documenti, la Mappa del sito può diventare a sua volta una pagina complicata da leggere. Si nota la tendenza, in questi casi, a rappresentarla mediante una immagine nella quale fanno bella mostra di sé directory e sotto directory nelle quali il sito è organizzato. Si introduce, così, un ostacolo grave alla accessibilità e tra l’altro proprio in un elemento come la Mappa del sito che ha la funzione di aiuto alla navigazione. È fondamentale realizzare la Mappa del sito mediante liste in modo da indicare la gerarchia della struttura.
Pattern correlati: —
Esempi: —

Novità
Contesto: un sito è una entità in continuo divenire e può avere la necessità di comunicare le nuove informazioni inserite, siano esse documenti, comunicati stampa, annunci di eventi ecc. In molti casi ciò è addirittura indispensabile: si pensi alla pubblicazione di leggi, di regolamenti, di circolari esplicative ecc.
Condizioni: l’utente vuole essere portato a conoscenza delle novità del sito, senza dover navigare l’intero sito per trovarle.
Problema: come “avvisare” l’utente delle novità presenti?
Soluzione: definire nella Home page una zona espressamente dedicata alle novità.
Deve essere indicata la data e l’ora dell’ultimo aggiornamento effettuato. La lista delle novità deve essere ordinata per data con l’elemento più recente in cima. Ogni elemento deve essere caratterizzato dalla data di pubblicazione e da una breve descrizione del documento pubblicato. Gli elementi della lista devono rimanervi per un certo tempo in funzione della importanza e del contenuto del documento. In genere, non oltre un mese dalla pubblicazione. Se in questo lasso di tempo, peraltro, giungessero altre novità esse andrebbero a sostituire gli elementi “più vecchi”. Mai lasciare, comunque, annunci di eventi quando l’evento stesso si è ormai verificato! La zona delle novità deve essere bene in vista nella Home page. Una soluzione del tutto simile dovrebbe essere attuata anche nelle Home page secondarie, con l’ovvia considerazione che le novità qui presentate sono soltanto quelle relative alla sezione stessa.
Annotazioni: si osserva ormai con frequenza che l’area per le novità è realizzata mediante strumenti di programmazione (applet e script) che presentano una sorta di finestra nella quale un certo numero di notizie scorre incessantemente. Questo modo di realizzare l’area novità semplicemente la rende invisibile a tutti gli utenti che hanno il browser che non supporta applet e script, che usano gli screen reader, che usano magnificatori, che non usano il mouse. In sostanza, è il modo migliore per rendere l’area novità inaccessibile.
Pattern correlati: —
Esempi: —

Chi siamo
Contesto: è importante che sia ben chiara l’identità del produttore della informazione contenuta in un sito Web. Quando, poi, il produttore è anche un Soggetto culturale allora diventa fondamentale dichiarare identità, missione e scopi del sito.
Condizioni: l’utente deve essere messo in condizione di riconoscere rapidamente l’identità del Soggetto culturale produttore delle informazioni; deve avere ben chiari missione e scopi della presenza del Soggetto pubblico sul Web.
Problema: come comunicare agli utenti la identità del Soggetto culturale?
Soluzione: prevedere delle pagine di presentazione raggiungibili da un elemento della Navigazione principale.
Nelle pagine di presentazione dovrebbe essere ben descritta la identità di un Soggetto culturale con informazioni riguardanti:

• la storia del Soggetto culturale;
• le sue finalità istituzionali;
• il contenuto culturale e scientifico da lui prodotto, conservato, tutelato e diffuso;
• la sua struttura organizzativa;
• la sede ed Il luogo in cui esso opera.

Annotazioni: —
Pattern correlati: —
Esempi: —

Modalità d’uso
Contesto: il sito contiene materiale sottoposto a copyright. Possono essere richieste all’utente informazioni personali sensibili e protette dalle norme sulla privacy.
Condizioni: gli utenti devono conoscere le condizioni d’uso dei documenti presenti nel sito; devono conoscere le politiche di privacy e sicurezza attuate; devono conoscere le politiche attuate in merito alla accessibilità dei contenuti.
Problema: come comunicare all’utente le condizioni d’uso del sito?
Soluzione: inserire alla fine di ogni pagina collegamenti a pagine che descrivono le condizioni d’uso.
Si possono presentare questi collegamenti in forma di barra orizzontale del tipo:
Condizioni d’uso | Copyright | Privacy | Accessibilità
Le pagine descrittive dovrebbero essere realizzate con linguaggio chiaro e semplice, evitando l’uso di termini tecnici o gergali e dovrebbero offrire all’utente la possibilità di esprimersi direttamente su quanto indicato.
Annotazioni: —
Pattern correlati: —
Esempi: —

Facilitare la lettura
Contesto: deve essere presentata molta informazione in formato tabellare (righe e colonne), come ad esempio nelle risposte ad una Ricerca o per la presentazione di record di base di dati.
Condizioni: la tabella può essere complessa ed avere molte colonne oppure avere righe con molto testo ed essere perciò di difficile lettura.
Problema: gli utenti devono poter leggere facilmente la tabella per cercare l’informazione che desiderano.
Soluzione: alternare i colori di sfondo delle righe.
Usare due colori di tonalità lieve, di poco differenti l’uno dall’altro. L’effetto può essere rafforzato introducendo una linea orizzontale di colore scuro tra le righe della tabella.
Annotazioni: l’alternanza dei colori e la eventuale linea orizzontale eliminano la necessità di disegnare I bordi delle tabelle che sullo schermo rendono sempre difficile la lettura.
Pattern correlati: —
Esempi: —

Informazione ridondante
Contesto: l’informazione contenuta in un sito è per sua natura ipertestuale: un documento può rinviare ad altri documenti che si trovano nello stesso sito o in altri siti. Diversamente da un documento cartaceo, che presenta le citazioni ed i riferimenti bibliografici in esso contenuti in genere raggruppati in una apposita sezione finale (o nelle note in calce), in un documento Web questi elementi di riferimento sono inseriti nel testo stesso mediante i collegamenti ipertestuali.
Condizioni: l’utente può voler valutare da sé la utilità del collegamento ipertestuale che incontra nella lettura del documento ai fini della comprensione dello stesso, l’utente deve essere avvertito quando un collegamento si apre in una finestra diversa da quella corrente, deve essere avvertito quando un collegamento lo porta in un sito diverso da quello attuale.
Problema: come informare l’utente sui contenuti e sulla destinazione del collegamento che gli viene proposto?
Soluzione: mostrare una breve descrizione degli scopi del collegamento e della sua destinazione.
L’informazione supplementare fornita è ridondante perché (si suppone…) il contesto dovrebbe chiarire lo scopo del collegamento proposto. L’informazione supplementare appare in forma di piccola finestra che appare al passaggio del mouse sul collegamento (link title). Bisogna non esagerare nella lunghezza del “messaggio” inserito onde non disturbare la lettura del documento: sovente è sufficiente una frase.
Annotazioni: è fondamentale avvertire l’utente della apertura o meno del collegamento in una nuova finestra e, soprattutto, quando il collegamento è ad un documento che si trova in un altro sito. Egli infatti troverà, normalmente, un ambiente diverso da quello attuale e potrebbe trovarsi spaesato.
Pattern correlati: —
Esempi: —

Geometria variabile
Contesto: la presentazione di una pagina Web è molto importante: le dimensioni della pagina e i rapporti che esistono tra le superfici delle varie zone in cui la pagina è organizzata non sono casuali. Essi sono funzione dei contenuti.
Condizioni: l’utente può volere una ampiezza della finestra del browser sul monitor del PC diversa da quella stabilita dal progettista; può volere una dimensione dei caratteri del testo diversa da quella prestabilita.
Problema: gli utenti devono poter visualizzare la pagina ed il suo contenuto in modo gradevole indipendentemente dalle dimensioni della finestra del browser e da quelle dei caratteri del testo.
Soluzione: costruire pagine a Geometria variabile, che si adattino facilmente alle dimensioni della finestra e dei caratteri scelte dall’utente.
Questa tecnica è nota anche come liquid layout. In breve, consiste nell’utilizzare:

• unità di misura proporzionali e non assolute nel definire la larghezza degli elementi di una pagina;
• unità di misura proporzionali e non assolute nel definire le dimensioni dei caratteri utilizzati del testo.

Annotazioni: si trovano ancora sul Web diciture del tipo “Ottimizzato per una risoluzione 800x600” e simili. Queste situazioni soddisfano, forse, le esigenze del grafico, certamente non quelle dell’utente che si vede imposta una specifica che non può o non vuole rispettare. In realtà, va presa coscienza da parte dei grafici Web che non è possibile fare previsioni sulle modalità con le quali l’utente visualizza le pagine del sito e che imporre condizioni significa allentarlo dal sito. In certe circostanze, l’utente preferisce un certo degrado della grafica di presentazione piuttosto che avere dei vincoli non graditi.
Pattern correlati: —
Esempi: —

Paginazione
Contesto: una pagina può contenere gran quantità di informazione. Può essere il risultato di una ricerca costituito da un elenco di molti elementi oppure può essere un documento molto lungo.
Condizioni: l’utente deve avere una idea della quantità di informazione che è a sua disposizione in quel momento, ma nello stesso tempo deve poterne fruire in modo adeguato.
Problema: come è possibile presentare grandi quantità di informazione in maniera gradevole e fruibile per l’utente?
Soluzione: suddividere in pagine l’informazione da presentare e indicare sia il numero complessivo delle pagine che la posizione della pagina corrente all’interno dell’insieme ottenuto.
Queste indicazioni vanno inserite all’inizio e alla fine della pagina e sono del tipo:
pagina 4 di 5 < precedente 1 2 3 4 5 successiva >
A sinistra appare la ordinalità della pagina corrente, mentre a destra appare una mini barra di navigazione con in grassetto l’ordinale relativo alla pagina corrente e gli altri elementi sono collegamenti attivi. Il criterio con cui paginare non è unico, né si possono dare indicazioni precise sul come effettuarlo. Se per il risultato di una ricerca derivante da una Ricerca semplice o da una Ricerca avanzata è possibile indicare in 10 per pagina il numero di elementi trovati, per la paginazione di un lungo documento non è possibile dare indicazioni quantitative altrettanto precise.
Infatti, sebbene sia possibile definire il numero massimo di righe di cui è composta una pagina e quindi far si che un programma esegua “automaticamente” la paginazione, può nascere il problema di dare un senso logico alla stessa. Solo una analisi del testo del documento può suggerire quale sia la soluzione migliore (automatismo o manualità) caso per caso.
Annotazioni: —
Pattern correlati: —
Esempi: —

Versione stampabile
Contesto: sebbene il Web sia uno strumento pensato per la consultazione on-line delle informazioni, é spesso ritenuto utile consultare off-line il documento o la pagina trovati nel sito, vuoi per la lunghezza del testo, vuoi per la volontà di una attenta lettura dello stesso. Perciò si ricorre alla stampa della pagina.
Condizioni: l’utente vuole una stampa del testo ripulita dalle barre di navigazione e da tutti gli altri elementi non attinenti; l’utente vuole che la stampa avvenga in maniera corretta sul formato previsto dalla sua stampante;
Problema: come fornire una stampa corretta del contenuto della pagina o del documento?
Soluzione: prevedere una versione ad hoc del documento per la stampa ed inserire all’inizio ed alla fine della pagina un collegamento del tipo versione stampabile.
La versione stampabile è in realtà una nuova pagina unica con un layout che normalmente contiene solo l’intestazione, il testo e diciture del tipo “Stampato il …. Dal sito …… Pagina n di p” ed ha caratteristiche di dimensioni e di font tali da adattarsi facilmente al formato previsto dalla stampante. Ciò si ottiene costruendo la pagina a Geometria variabile. Se la pagina corrente è una parte di un documento (Paginazione), allora la versione stampabile è riferita all’intero documento.
L’utente ottiene la stampa in due passaggi: prima attiva il collegamento versione stampabile e poi attiva il comando di stampa proprio del suo browser. In altre parole, la versione stampabile del documento non deve essere ottenuta mediante elementi di programmazione (script o applet) che agiscano direttamente sulla stampante locale. In questo modo, tra l’altro, si lascia all’utente il controllo totale della situazione: egli può anche rinunciare alla stampa senza che ciò pregiudichi la sua possibilità di riprendere la navigazione del sito.
Annotazioni: —
Pattern correlati: —
Esempi: —

Punti di riferimento ben definiti
Contesto: il sito è organizzato in una struttura gerarchica che può avere un notevole numero di livelli. Inoltre, l’informazione in esso contenuta può riguardare molti argomenti che non sempre è possibile correlare tra loro in modo semplice.
Condizioni: un sito complesso può disorientare l’utente che vi accede la prima volta, soprattutto quando arriva su una pagina seguendo un collegamento da un altro sito; se il sito è complesso, gli strumenti di navigazione presenti possono dare troppa informazione oppure informazione molto specialistica per essere immediatamente utile; gli utenti che hanno familiarità con il sito vogliono comunque non dover percorrere alberi gerarchici troppo lunghi per spostarsi all’interno del sito.
Problema: come si può indicare all’utente da dove cominciare la navigazione del sito?
Soluzione: fornire dei punti di riferimento ben definiti, raggiungibili immediatamente da qualunque pagina.
Il più evidente punto di riferimento ben definito (ed il più noto) è la Home page del sito nella quale l’utente trova indicazioni utili sulla organizzazione del sito, sui suoi contenuti e sui Sistemi di navigazione disponibili. Anche le aree e le sezioni (Struttura del sito), quando aggregano molta informazione, dovrebbero avere una loro home page (Home page secondaria) nella quale siano spiegati i contenuti e le eventuali ulteriori suddivisioni. Questi Punti di riferimento ben definiti, costituiscono un ottimo punto per la costituzione di Segnalibri affidabili da parte degli utenti abituali o comunque interessati a quel particolare argomento. Altri Punti di riferimento ben definiti possono essere la Pagina di ricerca e la Mappa del sito.
Annotazioni: —
Pattern correlati: —
Esempi: —

Sistemi di navigazione
Contesto: i contenuti di un sito sono organizzati in una struttura che è sconosciuta all’utente. In genere, tanto più grande è la quantità di contenuti fornita, tanto più difficile è presentarla all’utente.
Condizioni: l’utente deve poter esplorare la struttura e navigare il sito con relativa facilità; deve avere diverse opportunità per farlo; deve fare affidamento su ciò che conosce e ciò che vede; non deve perdersi.
Problema: come facilitare la navigazione dell’utente?
Soluzione: progettare diversi sistemi di navigazione che cooperano per offrire all’utente numerose alternative.
I sistemi di navigazione da considerare sono:

• la Navigazione principale: è quella che permette di raggiungere le aree principali in cui si articola la Struttura del sito. È presente in tutte le pagine del sito e si trova sempre nella stessa posizione all’interno della Struttura della pagina. Gli elementi di cui è composta offrono in genere il collegamento alla Home page secondaria che descrive i contenuti dell’area.
• la Navigazione secondaria: è quella che permette di esplorare la struttura sottostante un’area o una sezione. Non ha una posizione precisa in ogni pagina del sito perché le sue caratteristiche dipendono dalla maggiore o minore complessità della Struttura del sito.
• la Metanavigazione: è quella che riunisce le funzioni di utilità indispensabili per sopperire alle inevitabili manchevolezze degli altri Sistemi di navigazione.
• la Navigazione contestuale: si usa quando si vuole costruire un insieme di documenti tra loro collegati, un dossier. In genere, si posiziona alla destra del corpo della Struttura della pagina, in modo visibile e riconducibile anche graficamente al contenuto centrale.

I vari sistemi di navigazione devono essere progettati per cooperare nel senso di offrire informazioni complementari l’uno dell’altro. È da evitare la presenza di collegamenti allo stesso oggetto in sistemi diversi.
Annotazioni: —
Pattern correlati: —
Esempi: —

Navigazione principale
Contesto: il sito è organizzato gerarchicamente in aree, sezioni e sottosezioni. Il numero totale di questi elementi nel loro insieme è elevato.
Condizioni: l’utente deve potersi districare agevolmente nella struttura del sito. Troppa informazione tutta insieme può disorientarlo.
Problema: come si può fornire un modo di navigare il sito senza presentare liste di opzioni troppo lunghe per essere davvero consultabili?
Soluzione: costruire un sistema di navigazione principale (barra di navigazione) che comprenda non più di sei o sette elementi e sia ripetuto nella stessa posizione nella struttura di ogni pagina.
La barra di navigazione è uno dei componenti più importanti di una pagina perché consente all’utente di avere una percezione chiara dei contenuti e di navigare la struttura senza perdersi. Per questo è importante che:

• l’utente possa ricordarne facilmente il contenuto e perciò:
  • il numero di elementi che la costituiscono non deve superare sei o sette. Questo è il limite comunemente riconosciuto alla capacità umana di memoria breve;
  • gli elementi devono avere un Nome significativo che evochi immediatamente i contenuti della destinazione. In genere, essi collegano alle Home page secondarie che descrivono il contenuto delle aree (Struttura del sito). Per maggiore chiarezza si può aggiungere Informazione ridondante ad ogni elemento,
  • gli elementi devono essere presentati in forma di lista reale cioè costituita da testo e non da immagini;
• la sua posizione sia sempre la stessa in tutte le pagine. Sul Web sono presenti interessanti soluzioni che consentono di associare la Navigazione principale agli altri Sistemi di navigazione previsti.
  Le due soluzioni più comuni sono:
  • posizionare la barra di navigazione su una o più righe orizzontali immediatamente sotto la Intestazione della pagina. Questa soluzione:
    • ha il vantaggio di lasciare maggiore spazio al corpo della pagina;
    • ha il vantaggio di essere sempre completamente in primo piano;
    • ha lo svantaggio di poter utilizzare uno spazio limitato. Le dimensioni delle pagine (Geometria variabile) dipendono da alcune scelte dell’utente: la larghezza reale dipende dalla larghezza della finestra aperta, la scelta della dimensione dei caratteri sullo schermo può far diminuire ancora la lunghezza della riga orizzontale disponibile. Non essendo prevedibile lo spazio a disposizione diventa impossibile stabilire numero di elementi e lunghezza di ciascuno tali da mantenere una ragionevole impaginazione nelle diverse condizioni;
    • ha lo svantaggio di creare confusione con gli elementi di Metanavigazione, normalmente inseriti nella Intestazione sovrastante;
  • posizionare la barra di navigazione su una colonna a sinistra della pagina. Questa soluzione mantiene in gran parte i vantaggi della precedente e non ne ha gli svantaggi perché si adatta facilmente alle dimensioni reali della finestra ed è chiaramente distinta da tutti gli altri Sistemi di navigazione presenti. Di fatto è la più usata nei siti di maggior successo;
• il suo aspetto grafico sia sempre lo stesso in tutte le pagine. Il colore di sfondo, il colore del testo e i marcatori della lista devono rimanere sempre gli stessi.

Annotazioni: —
Pattern correlati: —
Esempi: —

Navigazione secondaria
Contesto: il sito è organizzato in una struttura gerarchica. Esiste un sistema di Navigazione principale che permette di navigarlo. Le singole aree sono organizzate in sezioni o contengono una gran quantità di documenti.
Condizioni: l’utente deve potersi districare agevolmente nella struttura della sezione. Troppa informazione tutta insieme può disorientarlo.
Problema: come si può fornire un modo di navigare l’area scelta senza presentare liste di opzioni troppo lunghe per essere davvero consultabili?
Soluzione: costruire un sistema di navigazione secondario (indice) separato da quello di Navigazione principale e che comprenda solo la lista delle sezioni che in cui è suddivisa la singola area.
Una buona Navigazione secondaria è più difficile da progettare della Navigazione principale perché in questo caso le variabili sono molteplici e non tutte ben definibili al momento della progettazione del sito: quante debbono o possono essere le sezioni di una area? Come gestire in modo efficace ed efficiente un indice dei documenti contenuti in una sezione, soprattutto se questi sono in grande numero?. In queste condizioni, una soluzione considerata ragionevole è quella di immaginare l’area e l’intera struttura sottostante come un sito a sé stante ed applicare ad esso i criteri validi per il sito nel suo complesso. La coerenza è garantita dalla Intestazione e dalla barra di Navigazione principale che sono comuni in tutte le pagine. In definitiva:

• la Home page secondaria svolge il ruolo di Home page e quindi presenta i contenuti della area: lista delle sezioni sottostanti oppure elenco dei documenti presenti. In particolare:
  • la lista delle sezioni è commentata nel senso che ogni suo elemento, oltre ad avere un Nome significativo, ha una descrizione dei contenuti,
  • l’elenco dei documenti è ordinato secondo un criterio che deve essere sempre indicato all’utente. Quando il numero di documenti è elevato si ricorre alla tecnica della Paginazione, si danno Suggerimenti di ricerca, si predispone un sistema di Risposte a domande frequenti (FAQ) relative agli argomenti trattati, si danno indicazioni per contattare i referenti;
• le Briciole di pane consentono di dare la percezione della “profondità” della struttura e di navigare in essa;
• la eventuale Navigazione contestuale consente di esplorare un insieme di documenti correlati al documento senza perdere la percezione dell’insieme dei documenti o del documento complesso.

Annotazioni: —
Pattern correlati: —
Esempi: —

Navigazione contestuale
Contesto: un documento è concettualmente parte di un insieme più vasto di documenti, oppure fa parte di un documento più complesso come il capitolo in un libro.
Condizioni: l’utente deve poter avere la percezione dell’insieme dei documenti o del documento complesso; deve poter accedere ai singoli documenti che costituiscono l’insieme.
Problema: come costruire un dossier virtuale o un documento complesso facilmente fruibili dall’utente?
Soluzione: predisporre un sistema di navigazione che:

• contenga i collegamenti a tutti i documenti costituenti il dossier o il documento complesso. I documenti possono essere:
  • documenti di testo
  • documenti multimediali
  • collegamenti a siti esterni;
• sia comune a tutti i documenti del dossier (se appartenenti al sito);
• sia visivamente e graficamente riconducibile al testo centrale del documento corrente.

Il posto candidato per la Navigazione contestuale è nella parte destra del corpo della Struttura della pagina.
Annotazioni: La Navigazione contestuale non va confusa con la Paginazione di un documento. Questa risolve un problema di leggibilità legato alle caratteristiche tecniche degli strumenti utilizzati per navigare nel Web, la Navigazione contestuale risolve il problema di offrire completezza e ricchezza di contenuti.
Pattern correlati: —
Esempi: —

Metanavigazione
Contesto: gli strumenti di navigazione di un sito, per quanto ben progettati, possono rivelarsi insufficienti al reperimento veloce ed affidabile della informazione da parte dell’utente, che può avere anche la necessità di contattare il sito (cioè l’Organizzazione) sulla base di una informazione reperita durante la navigazione oppure per il fatto che una informazione non sia presente.
Condizioni: certi tipi di funzionalità per l’uso del sito sono rilevanti in ogni pagina.
Problema: come mettere a disposizione dell’utente strumenti di aiuto pronti all’uso?
Soluzione: riservare in ogni pagina una zona che contenga elementi per la comunicazione e le funzionalità generali.
Questi elementi di norma sono: Home, Pagina di ricerca, Mappa del sito. Home indica il collegamento alla Home page. Tutti gli elementi della Metanavigazione dovrebbero essere raggruppati nello stesso punto in modo da dare l’idea di un blocco unico, in ogni pagina e in modo “visibile”. Un buon posto candidato ad accoglierli è l’intestazione della Struttura di pagina, subito dopo il logo.
Annotazioni: una caratteristica degli elementi di Metanavi-gazione è quella di utilizzare una nuova finestra per il loro utilizzo: tutti, infatti, hanno necessità di spiegazioni ulteriori. E queste possono essere sinteticamente inserite proprio nella pagina attraverso la quale essi vengono utilizzati.
Pattern correlati: —
Esempi: —

Briciole di pane
Contesto: il sito è costituito da diversi livelli in cui l’informazione è strutturata. Il numero di livelli o la complessità della struttura sono notevoli. Il sito è dotato di sistemi di Navigazione principale di Navigazione secondaria.
Condizioni: l’utente può non avere familiarità con la struttura del sito, può voler saltare a punti precedenti il percorso seguito senza dover ricorrere all’uso ripetuto del tasto “Indietro”, è opportuno che egli percepisca la struttura dell’informazione costruendosi una mappa mediante l’associazione della tipologia di un tipo di documento al percorso effettuato per rintracciarlo.
Problema: come indicare all’utente in quale punto della struttura egli si trova in questo momento?
Soluzione: mostrare il percorso dalla Home page alla pagina corrente.
Ad esempio, in ogni pagina, esclusa la Home page, dovrebbe esserci qualcosa del tipo:
Home > Area > Sezione > Pagina corrente
in cui Home è il riferimento alla Home page e Area, Sezione e Pagina Corrente sono i titoli dell’area, della sezione e della pagina corrente, rispettivamente. Il percorso mostra la posizione della pagina corrente rispetto alla struttura del sito. Gli elementi del percorso sono collegamenti attivi: l’utente può arrivarci immediatamente, attivandoli. Pagina corrente, al contrario, non deve essere un collegamento, nel rispetto della regola generale che considera un grave errore la presenza di collegamenti alla pagina corrente, tranne il caso di collegamenti ad altri punti della stessa. La separazione dei vari punti del percorso viene mostrata con il carattere > (simbolo “maggiore di”); si possono anche utilizzare altri caratteri come / (slash) o => (uguale maggiore): tutti danno il senso di percorrenza.
I nomi utilizzati per scandire il percorso devono essere quelli significativi (Home page a parte, che è ormai entrato nell’uso comune): tipicamente per aree e sezioni si usa il nome che compare nella Navigazione principale (area) e nella Navigazione secondaria (sezione). Per indicare la Pagina corrente è bene utilizzare il suo titolo (page title).
Il percorso può essere inserito proprio all’inizio (prima riga, allineata a sinistra) della zona contenuto della Struttura di pagina. In questo modo è immediatamente visibile e non sacrifica molto dello spazio dedicato ai contenuti veri e propri.
Annotazioni: il percorso deve essere realizzato mediante testo, e non con una immagine né con immagini tipo freccette o elementi grafici vari (simboli di cartella tipo Windows ecc): ne va della leggibilità e della accessibilità.
Pattern correlati: —
Esempi: —

Segnalibri affidabili
Contesto: la funzione “Segnalibri” è presente in tutti i browser ed è molto utile all’utente. Può accadere che, per ragioni diverse, l’URL di pagine del sito venga modificato, rendendo così inutili gli eventuali segnalibri che ad esse facevano riferimento.
Condizioni: l’utente vuole avere la sicurezza che i suoi segnalibri rimangano validi nel tempo.
Problema: come garantire all’utente che i segnalibri da lui scelti nel sito rimangano validi?
Soluzione: in caso di modifiche all’URL di una pagina, prevedere una funzione di indirizzamento automatico al nuovo URL, con avviso della modifica avvenuta (Comunicare l’esito).
È in generale molto fastidioso trovarsi davanti al tristemente noto messaggio “Error 404: Object Not Found”, e alle sue varianti, che comunica la indisponibilità del documento al quale il collegamento si riferiva. Ci si fa l’idea di una certa trascuratezza nella redazione delle pagine del sito, visto che spesso l’errore è dovuto ad una errata descrizione dell’URL della pagina. Quando, poi, un simile evento si verifica dopo che su quell’URL si è fissato un segnalibro, allora oltre al fastidio nasce il dispetto. In realtà, basta poco per evitare simili errori. Da un lato bisogna avere la cura di descrivere correttamente l’URL di un collegamento, facendo una verifica de visu della sua validità, dall’altro lato, quando le modifiche all’URL sono volute, basta predisporre una opportuna pagina nella quale si comunica all’utente il nuovo URL e si procede a indirizzarlo alla nuova destinazione in maniera automatica. Nel caso in cui non sia possibile garantire il rinvio dell’utente alla pagina desiderata, è spesso possibile personalizzare il Web server in modo che, a fronte di una pagina non trovata, restituisca una pagina in cui, oltre a spiegare chiaramente l’errore, fornisca tutte le indicazioni e le funzionalità per ritrovare il segnalibro perso.
Annotazioni: —
Pattern correlati: —
Esempi: —

Pagina di ricerca
Contesto: anche quando un sito è dotato di buoni Sistemi di navigazione, può risultare complicato reperire in esso l’informazione. La presenza di una funzionalità di ricerca diventa perciò ausilio fondamentale al sistema di navigazione.
Condizioni: ci sono molti modi per cercare l’informazione; la ricerca è un ausilio alla navigazione: non deve sostituirsi ad essa; l’utente può non conoscere tecniche sofisticate di ricerca e può non conoscere le modalità di classificazione dei documenti contenuti nel sito.
Problema: come può l’utente ricercare un documento nel sito?
Soluzione: fornire una pagina espressamente dedicata dalla quale effettuare la ricerca.
Predisporre una pagina dedicata alla ricerca permette di garantire l’utente sulla disponibilità immediata di tale funzionalità da tutte le pagine del sito (Punti di riferimento ben definiti, Metanavigazione), la pagina può essere strutturata (Struttura della pagina) in modo tale che l’utente abbia la piena disponibilità degli strumenti di ricerca resi disponibili (Ricerca semplice, Ricerca avanzata, Risposte a domande frequenti, suggerimenti ecc.). La Pagina di ricerca è unica per tutto il sito. In essa è importante definire in maniera chiara cosa si può ricercare. L’utente può non avere la stessa idea di documento e/o di pagina così come sono stati pensati dai progettisti del sito. Vanno precisati gli intervalli temporali dei documenti contenuti nel sito e vanno spiegate (magari con semplici esempi) le modalità di ricerca offerte.
Annotazioni: —
Pattern correlati: —
Esempi: —

Ricerca semplice
Contesto: il sito dispone di buoni Sistemi di navigazione e di una Pagina di ricerca. In quest’ultima vengono rese disponibili diverse modalità per effettuare la ricerca stessa. Condizioni: l’utente non è un esperto di ricerca documentale, non gli sono cioè familiari concetti come operatori booleani di ricerca, similarità ecc.; utilizza una terminologia che gli è familiare, spesso mutuata dal linguaggio corrente piuttosto che una terminologia tecnico-specialistica, da “addetto ai lavori”.
Problema: come fornire uno strumento di ricerca semplice ed immediato?
Soluzione: offrire una modalità di ricerca nella quale l’unica opzione sia quella di indicare una parola o una frase da cercare.
La funzione si presenta mediante un Modulo (Form) che è costituito da un solo campo con una etichetta del tipo “Testo da cercare” seguita dal campo nel quale l’utente immette il testo e da un bottone “Cerca” tramite il quale avviare la ricerca.
I risultati della ricerca sono presentati in una nuova pagina in forma di elenco ordinato a Lettura facilitata. L’ordine di presentazione dei risultati è specificato nella Pagina di ricerca. Il numero di elementi dell’elenco non dovrebbe essere superiore a 10: in caso di più di 10 elementi si ricorre alla Paginazione con l’indicazione sia del numero totale di elementi trovati che delle pagine totali in cui essi sono suddivisi. Ogni elemento dovrebbe essere caratterizzato da:
• titolo della pagina (page title)
• percorso per raggiungere l’elemento trovato a partire dalla Home page (Briciole di pane)
• due o tre righe del testo della pagina trovata
• URL, dimensioni e data.
Annotazioni: il testo da cercare può essere costituito da una o più parole. Nella Pagina di ricerca va specificato come si comporta il motore di ricerca nel caso di un testo costituito da
più parole. In questa modalità di ricerca non è normalmente utile prevedere che l’utente utilizzi gli operatori logici AND, OR
e NOT: quanti utenti in realtà ne comprendono il significato e quanti li sanno usare correttamente? Meglio progettare una buona Ricerca avanzata e fare affidamento su di essa.
Pattern correlati: —
Esempi: —

Ricerca avanzata
Contesto: il sito è dotato di buoni Sistemi di navigazione e di una funzionalità di Ricerca semplice.
Condizioni: l’utente vuole delimitare l’insieme di ricerca con criteri suoi; l’utente vuole avere più controllo sulla modalità di ricerca ma non sa come fare; l’utente vuole effettuare filtri successivi sulle ricerche che compie, l’utente vuole controllare la modalità di presentazione dei risultati della sua ricerca.
Problema: come potenziare la funzionalità di ricerca nel sito?
Soluzione: offrire una modalità di ricerca avanzata con possibilità per l’utente di gestire autonomamente almeno:

• la stringa di ricerca
• l’ambito di ricerca all’interno del sito
• il periodo temporale di riferimento per i documenti da cercare
• la presentazione dei risultati.

Per far gestire la stringa di ricerca all’utente il modo più semplice è quello di offrire le tre classiche possibilità

di scelta:

• cerca TUTTE le parole
• cerca ALMENO UNA parola
• cerca la FRASE ESATTA.

Per far definire all’utente l’ambito di ricerca all’interno del sito si
può mettere a sua disposizione la possibilità di limitare la ricerca
in una o più aree a scelta (se il sito è stato organizzato in tal modo mediante una opportuna Struttura del sito), oppure facendo scegliere tra diverse tipologie di documenti, qualora una tale classificazione sia stata fatta. Questo caso, però, è molto più complesso da realizzare perché i ben noti problemi della classificazione documentale in campo archivistico e bibliotecario sono qui esasperati dalla incerta definizione del concetto di documento applicata ad un sito Web. Per quanto riguarda il periodo temporale al quale si riferiscono i documenti presenti nel sito, particolare attenzione va fatta proprio sulla definizione di periodo temporale. Infatti, a seconda del tipo di documento, può avere senso intendere come data del documento quella relativa al suo inserimento nel sito (la data di sistema), oppure quella relativa alla validità giuridica e amministrativa quali leggi, regolamenti, circolari, comunicazioni ecc. Infine, la gestione della presentazione dei risultati può essere offerta mediante la possibilità di modificare qualcuno o tutti gli aspetti di presentazione previsti nella Ricerca semplice: il numero di elementi per pagina, le caratteristiche tipiche di ogni elemento presentato ecc.
Annotazioni: —
Pattern correlati: —
Esempi: —

Risposte a domande frequenti (FAQ)
Contesto: quando una Pubblica Amministrazione si presenta su Internet con un suo sito Web apre, di fatto, uno sportello al cittadino. Anche se la interattività, intesa come possibilità di comunicazione diretta tra cittadino ed Amministrazione, è limitata o non prevista affatto, il cittadino si aspetta di trovare risposte alle sue domande, ai suoi dubbi su questioni che sono (o presume siano) di pertinenza dell’Amministrazione.
Condizioni: l’utente vuole conoscere più il “come agire” rispetto ad una norma che non il “perché” della stessa; l’utente è portatore di un “suo caso personale” ed è ad esso che vuole risposta.
Problema: come si possono prevedere e prevenire le domande dell’utente?
Soluzione: si predispone un sistema di Risposte a domande frequenti (FAQ) che sia coerente con la struttura delle informazioni presenti.
Il sistema delle FAQ è ormai un metodo consolidato per fornire informazioni sulle informazioni presenti nel sito. Sovente si trova la raccomandazione di leggere le FAQ prima di inviare e-mail con domande. Mediante le FAQ l’utente può essere guidato ad utilizzare al meglio l’informazione presente.
Il sistema di FAQ dovrebbe essere direttamente connesso alla modalità prevista per la comunicazione con l’utente e dovrebbe essere “sensibile al contesto”. Quando l’utente apre la pagina per inviare comunicazioni, trova in essa anche le FAQ.
In sostanza, una buona organizzazione delle FAQ prevede che queste siano organizzate in una sorta di indice tematico nel quale i temi sono gli argomenti trattati nelle aree e nelle sezioni (Struttura del sito).
Perciò avremo:

• FAQ di tipo generale attivabili dalla Home page;
• FAQ di tipo tematico attivabili in ogni singola sezione (o in ogni singola area);
• FAQ di tipo settoriale attivabili in documenti / pagine di particolare rilevanza.

Annotazioni: —
Pattern correlati: —
Esempi: —

Moduli (Form)
Contesto: i moduli (form) costituiscono uno dei metodi più comuni per realizzare la comunicazione tra l’utente ed il fornitore del sito Web. In essi, egli deve fornire informazioni, inserendole in determinati campi oppure fornire risposte guidate a domande. Normalmente, le informazioni vengono richieste in modalità “codificata”, e non discorsiva.
Condizioni: l’utente vuole avere chiaro il tipo di informazione che gli viene richiesta; l’utente vuole avere chiaro cosa è obbligatorio e cosa è opzionale.
Problema: come indicare in modo semplice il tipo di informazione richiesta?
Soluzione: progettare form che abbiano:

• un Nome significativo
• la lunghezza dei campi appropriata all'informazione richiesta
• le etichette dei campi chiare, ben posizionate ed espresse in una terminologia il più possibile familiare all’utente
• il “focus” ben evidenziato sul campo da riempire
• i campi disposti in una successione che abbia un senso logico, ragionevolmente comprensibile all’utente
• i campi obbligatori raggruppati e distinti da quelli opzionali, magari indicando in modo esplicito l’inizio e la fine dei due gruppi.

Un Nome significativo ed una breve descrizione dei motivi per cui l’utente deve compilare il modulo;
La lunghezza dei campi opportuna: un campo in genere è realizzato mediante una casella di testo all’interno della quale si può scrivere liberamente. La lunghezza della casella di testo deve essere commisurata alla lunghezza media probabile del testo stesso.
Le etichette dei campi chiare e ben posizionate rispetto al campo cui si riferiscono. Etichette chiare nella richiesta di informazione: se una etichetta indica Indirizzo, deve voler dire si sta chiedendo all’utente di inserire via, numero civico, CAP e città (ammesso che ciò abbia senso) e non soltanto una sola o parte di queste informazioni; ben posizionate, cioè prossime al campo cui si riferiscono e allineate verticalmente, così come allineati verticalmente devono essere i campi di input. Un aspetto ordinato del modulo facilita la compilazione.
Focus ben evidenziato sul campo da riempire: per esempio cambiando il colore di etichetta e casella interessate e aggiungendo Informazione ridondante.
Successione logica dei campi: se, ad esempio, si richiedono informazioni personali e professionali, allora prima si inseriscono tutti i campi relativi al primo gruppo poi tutti quelli relativi al secondo gruppo.
Campi obbligatori raggruppati: c’è la tendenza sul Web a proporre all’utente form che hanno l’intento di acquisire anche informazioni “a fini statistici”. Ciò disturba l’utente: nessuno si diverte a compilare moduli sul Web, perché è una operazione che richiede tempo e sul Web il tempo costa (letteralmente). Perciò: separare i campi obbligatori da quelli opzionali in modo che l’utente, compilati i primi, possa tranquillamente inviare il modulo. Indicare espressamente, magari graficamente, l’inizio e la fine dei campi obbligatori.
Annotazioni: —
Pattern correlati: —
Esempi: —

Comunicare l’esito
Contesto: l’utente interagisce continuamente con il sito: naviga per mezzo dei collegamenti; compila moduli per effettuare ricerche o per inviare informazioni; scarica documenti di vario tipo dal sito al suo computer.
Condizioni: l’utente vuole essere sempre avvisato dei risultati dell’operazione compiuta; vuole mantenere sempre il controllo della situazione.
Problema: come inviare all’utente una opportuna informazione sull’esito della operazione compiuta (feedback)?
Soluzione: comunicare all’utente, in modo implicito o esplicito, il risultato della azione compiuta.
Navigare: quando l’utente segue un collegamento l’informazione di corretta esecuzione dell’azione è la presentazione della pagina richiesta (comunicazione implicita) o l’invio di una pagina che spieghi perché la pagina richiesta non è più disponibile e come fare per ottenerla
Compilare moduli: l’utente ha inserito informazioni nei campi di input di un Modulo. In genere, ciò che può accadere è:

1. l’utente inserisce dati errati nel campo del Modulo per errore semantico o di formato;
2. l’utente non compila campi obbligatori;
3. l’utente compila correttamente tutti i campi.

Nei casi 1. e 2. si deve inviare un messaggio per comunicare che:

1. c’è stato un errore, indicando il perché (semantico, di formato o omissione). Questo avviso deve essere messo bene in evidenza nella pagina;
2. dove è avvenuto l’errore, evidenziando opportunamente il campo interessato;
3. come correggere l’errore, ad esempio indicando il formato e la corretta sintassi dell’informazione da fornire.

Nel caso 3, la modalità di Comunicazione dell’esito dipende dagli scopi per cui il Modulo è stato compilato: per una Ricerca, per una Registrazione, per un Login.
Scaricare file: quando viene offerto agli utenti il download di un file bisogna indicare sempre il tipo di file e le sue dimensioni. Questo per informare preventivamente l’utente delle implicazioni della operazione che sta per compiere.
Annotazioni: —
Pattern correlati: —
Esempi: —

Login
Contesto: nel sito ci sono funzionalità, quali la Newsletter, la partecipazione a liste di discussione, l’accesso a sezioni riservate per le quali si richiede all’utente di identificarsi. Le informazioni richieste possono essere numerose e riguardare dati sensibili quali nome, età, indirizzo di e-mail.
Condizioni: l’utente deve poter comunicare tutti i dati una sola volta; deve poter gestire in modo autonomo i propri dati.
Problema: come permettere all’utente di identificarsi facilmente?
Soluzione: attivare una funzione di riconoscimento basata su pochissimi parametri facili da ricordare.
I parametri di riconoscimento dovrebbero essere ridotti a due: nome utente e password. I dati completi dovrebbero, invece, essere richiesti una sola volta con la Registrazione. Alcune caratteristiche importanti del Login sono:

– ritardare il login e cioè attivare la procedura di identificazione solo al momento necessario, non prima;
– consentire l’uso dell’indirizzo di e-mail come nome utente: questa opportunità facilita il reperimento sicuro della password in caso di dimenticanza;
– consentire la memorizzazione dei parametri sul computer dell’utente, per esempio per mezzo di “cookies”. In questo modo nella successiva visita i campi saranno riempiti in modo automatico con le informazioni corrette.

Sicurezza. Per alcune funzionalità (vendita on-line, per esempio) è molto importante che l’utente sia a conoscenza che il collegamento avviene mediante connessioni sicure, cioè con l’uso di appropriati protocolli di sicurezza.
Fornire sempre Comunicazioni sull’esito della transazione effettuata.
Annotazioni: —
Pattern correlati: —
Esempi: —

Registrazione
Contesto: ci sono funzionalità per le quali si richiede all’utente di identificarsi tramite un Login. Per questi servizi personalizzati sono richieste all’utente numerose informazioni personali e spesso di carattere riservato.
Condizioni: l’utente non vuole essere costretto a fornire le stesse informazioni tutte le volte che intende usufruire di un servizio personalizzato; vuole essere garantito sulla corretta gestione dei propri dati.
Problema: come evitare all’utente di dover fornire numerose informazioni ogni volta che desidera accedere a servizi personalizzati?
Soluzione: offrire all’utente la possibilità di fornire i propri dati personali una volta soltanto.
La procedura di Registrazione deve essere realizzata con molta accuratezza:

1. devono essere richieste solo le informazioni realmente rilevanti;
2. se le informazioni richieste sono molte devono essere previsti diversi passi in ciascuno dei quali vengono richieste solo poche informazioni omogenee tra loro;
3. deve essere Comunicato l’esito di ogni passo effettuato dall’utente nel corso della procedura;
4. deve essere prevista una procedura che consenta all’utente di modificare i propri dati e di annullare la propria Registrazione;
5. devono sempre essere ben dichiarate le Modalità d’uso previste.

Annotazioni: —
Pattern correlati: —
Esempi: —

Newsletter
Contesto: i contenuti del sito trattano diversi temi. Possono esserci eventi, pubblicazioni, notizie che riguardano i temi trattati nel sito e che si ritiene siano interessanti da conoscere, anche se non si trovano nelle pagine del sito, ma in altri siti.
Condizioni: l’utente ha fiducia nel sito, ne riconosce l’autorevolezza nell’ambito dei temi trattati, vuole essere informato regolarmente sulle novità, può non voler visitare tutti i giorni il sito.
Problema: come ripagare la fiducia dell’utente?
Soluzione: predisporre una Newsletter da inviare con regolarità.
La Newsletter dovrebbe avere un formato che renda facile riconoscerne la provenienza, sia di agile lettura e non sia troppo “voluminosa”. Gli elementi tipici di una Newsletter dovrebbero essere i seguenti:

• Intestazione: nella quale deve essere indicata chiaramente l’identità di chi la spedisce. La cosa migliore è quella di riportare nella Newsletter la stessa intestazione delle pagine del sito (Struttura della pagina).
• Estremi di pubblicazione: anno di pubblicazione, numero e data.
• Indice delle notizie: titoli delle notizie pubblicate, ciascuno collegato alla notizia corrispondente.
• Notizie: non più di una decina. Ogni notizia dovrebbe avere un titolo significativo (Nome significativo), una sintesi breve e scritta in linguaggio semplice e chiaro (plain language) e i collegamenti ai documenti correlati.
• Istruzioni per la gestione della iscrizione: in esse devono essere previste le funzioni di cambio di indirizzo di e-mail, di cancellazione dalla Newsletter, di gestione dei dati di Registrazione (se prevista), di invio di commenti.
• Modalità di uso: diritti di autore, privacy, politiche di sicurezza adottate. Può essere una dichiarazione esplicita o un collegamento ad una pagina del sito appositamente predisposta (Modalità d’uso).

L’utente può iscriversi alla Newsletter compilando una Form nella quale viene richiesto l’indirizzo di e-mail al quale essa deve essere inviata. Se ritenuto opportuno si può richiedere all’utente una Registrazione. In entrambi i casi si deve Comunicare l’esito della operazione eseguita.
Il servizio di Newsletter dovrebbe essere ben evidenziato riservando ad esso una opportuna area nella Home page oppure come elemento della Navigazione principale. Si dovrebbe predisporre una pagina del sito appositamente dedicata nella quale si descrivono gli scopi della Newsletter, la sua periodicità e si mettono a disposizione dell’utente tutte le funzioni necessarie alla iscrizione, cancellazione, modifica dell’indirizzo, accesso all’archivio delle Newsletter pubblicate, visualizzazione on-line delle Newsletter. La pagina dedicata alla Newsletter deve comparire anche nella Mappa del sito.
Annotazioni: il rispetto della periodicità dichiarata è un requisito indispensabile per il successo della Newsletter. La Newsletter non dovrebbe sostituire la funzione Novità del sito: il suo scopo dovrebbe essere quello di fornire sui temi di riferimento informazioni più ampie di quelle contenute nelle pagine del sito.
Pattern correlati: —
Esempi: —