PROGETTAZIONE DI UN SITO WEB

UN BUON SITO DEVE AVERE DUE

CARATTERISTICHE:

• USABILITA’

Navigazione fluida con

contenuti facilmente

reperibili.

• ACCESSIBILITA’

Organizzazione dei

contenuti e

predisposizione degli

strumenti devono

consentire il facile uso

della pagina.

ALTRE CARATTERISTICHE SONO:

• Facilità d’accesso

• Velocità d’accesso

• Navigabilità

• Affidabilità

• Interattività

• Semplicità

• Coerenza

NATURA DI UN SITO

Esistono diverse tipologie di sito:

• Commerciale: necessita di un’impostazione

grafica efficace e di file al suo interno di limitata

grandezza per garantire un rapido caricamento.

• Culturale o scientifico: si concentra in primo

luogo sul contenuto e su come metterlo in

debito risalto.

• Amatoriale: in questo tipo di sito ci si può sentire liberi nell’impostazione, senza ignorare le caratteristiche generali della progettazione di un sito.

CREAZIONE DI UN SITO WEB

Nel lavoro di progettazione la parte più

importante è strutturare una valida

architettura, la quale determina la reale

usabilità di un sito.

APPROCCIO TOP-DOWN

Il primo approccio che si ha nei confronti di un sito,

quando l’autore di un sito non possiede ancora i

contenuti, viene denominato approccio top-down.

In questa fase si immaginano le macro-aree

tematiche, e si scompongono in sotto-insiemi.

Realizzata questa struttura il passo successivo

riguarda l’identificazione delle relazioni tra le varie

aree (atomi).

APPROCCIO BOTTOM-UP

L’approccio bottom - up, viene usato in casi

in cui il sito, o la sua base informativa, esiste

già, solitamente in formato elettronico (per

esempio un database) ma anche in formato

cartaceo o misto.

INTERFACCIA GRAFICA

Una volta progettata la struttura del sito si

passa alla progettazione dell’interfaccia

grafica, ovvero la modalità di presentazione

sullo schermo delle informazioni che devono

essere rese comprensibili e accessibili.

TESTO E IPERTESTO

Il termine testo indica qualunque messaggio

dotato di significato che prevede una modalità

di consultazione abbastanza rigida. Un testo in

sintesi è costituito da un insieme di materiali

disposti secondo un ordine fisso e rigoroso.

TESTO E IPERTESTO

Un ipertesto è un testo i cui materiali non sono articolati secondo un ordine prestabilito. Esso nasce dalla combinazione di due tipi di elementi:

Nodi: singoli blocchi di contenuti.

Collegamenti: nessi logici (o fisici) tra un blocco e l’altro, cioè le molteplici vie che l’utente può seguire per passare da un contenuto all’altro.

STRUTTURE IPERTESTUALI:

Lineare: le pagine vengono collegate l’una all’altra, in

sequenza; l’ultima pagina della serie contiene un

collegamento che consente di tornate all’inizio.

Gerarchica: le pagine sono ramificate in modo

gerarchico, ovvero suddivise in sezioni e sottosezioni.

Questa tipologia di struttura è la più diffusa sul web.

Reticolare: o circolare, tutte le pagine del sito sono

collegate tra loro, da ciascuna di esse si può andare su

un’altra qualunque.

L’INTERFACCIA

L’interfaccia di navigazione viene definita

come l’insieme degli strumenti che

consentono all’utente di capire i contenuti e

le funzioni di un sito e accedervi.

L’INTERFACCIA

Si parla di quattro tipi di navigazione:

• Navigazione generale

All’interno di un sito esistono delle aree che devono

essere raggiungibili da qualunque pagina, questa

diventerà la parte fissa dell’interfaccia di navigazione,

essa solitamente viene inserita identica in tutte la

pagine del sito.

L’INTERFACCIA

• Navigazione locale

Importante in questo caso, è la presenza di unformat che sia valido per tutte le navigazioni locali.

Nel caso in cui le esigenze siano troppo differenti èindispensabile una collocazione fissa, come colori osegni ricorrenti, in modo da lasciare l’interfaccia il piùcoerente possibile, cercando comunque di fare unadistinzione tra navigazione generale e locale.

L’INTERFACCIA

• Navigazione contestuale

In questo tipo di navigazione è importante tenere

presente che l’utente cambiando, durante la

navigazione, completamente area, ha bisogno di link

trasversali che siano identificabili come tali. Questi

possono essere anche delle indicazioni di tipo vedi

anche (freccia indietro), seguiti dalla lista dei link

trasversali.

L’INTERFACCIA

• Navigazione verso l’esterno

L’inserimento di link esterni prevede la realizzazionedi pagine che spieghino di cosa si tratta e chechiariscano al visitatore dove sta per andare. Inoltrese i link esterni non sono molti è possibileconfigurare il nuovo sito su una nuova finestra, inmodo che il sito di partenza rimanga in background.

REGOLE DELL’INTERFACCIA

• Le parole sottolineate sono link, le parole non sottolineatenon sono link;

• Il logo in alto a sinistra ha la funzione di ritorno allahomepage;

• Una scritta o un’icona posizionata su un fondo colorato coneffetto 3D è un pulsante ed è cliccabile ;

• I pulsanti indicano aree principali del sito, a differenza dei linktestuali, che indicano percorsi secondari e/o diretti;

• La successione dei pulsanti da sinistra a destra e dall’alto inbasso normalmente indica una gerarchia di importanza o unasuccessione logica.

MAPPA DI NAVIGAZIONE

La mappa di un sito deve assolvere due importanti

funzioni:

• logica: in quanto deve consentire al visitatore di

capire con un solo sguardo l’intera ramificazione del

sito;

• pratica: in quanto deve permettere al visitatore di

raggiungere immediatamente la pagina di suo

interesse, cliccando sulla voce opportuna all’interno

della mappa.

AMBIENTE

Un utente nel visitare un sito dovrebbe

sentirsi a suo agio. Deve essere in grado di

poter utilizzare il sito qualunque sia la sua

attrezzatura (tipo di computer, tipo di

softweare, ecc.),

USABILITA’ DI UNA PAGINA WEB

Perché una pagina sia usabile sono necessari

degli elementi che ne facilitino la lettura e la

fruizione.

GESTIONE DEI CONTENUTI

Per quanto riguarda il testo delle pagine web vengono

seguite alcune regole per una buona riuscita del sito:

• produzione di pagine brevi;

• le impostazioni tipografiche utilizzate dovrebbero

essere le più diffuse e utilizzate, limitando la scelta dei

caratteri a quelli standard per il Web.

GESTIONE DEI CONTENUTI

Nell’impaginare è importante tenere presente che

nella lettura a video la posizione in altezza è

variabile, quindi diventano importanti elementi a cui

l’occhio possa far riferimento per riprendere la

lettura dal punto in cui l’aveva lasciata.

In questi casi si parla di strumenti di “ancoraggio

ottico”.

GESTIONE DEI CONTENUTI

Alcuni elementi di “ancoraggio ottico” possono essere:

• titoli e sottotitoli: è importante usarne molti, in

grassetto o in un colore distinguibile dal testo e dai

link;

• segni di evidenza: come il Bold, o un segno colorato

(come evidenziatore), in modo da evidenziare frasi o

parole sia in senso fisico che in senso logico;

GESTIONE DEI CONTENUTI

• link: questi devono essere riconoscibili rispetto al testo, ai titoli e alle evidenze;

• salto riga: un testo che presenta un salto di riga alla fine di ogni frase o capoverso, rende sicuramente la lettura più agevole;

• riquadri e altre evidenze: attraverso l’utilizzo delle potenzialità dei fogli di stile possono essere creati dei riquadri, righe di divisione che suddividono il testo in blocchi e che ne facilitano ulteriormente la lettura.

GESTIONE DEI CONTENUTI

Lo strumento principale, usato per

l’impaginazione su Web è quello delle tabelle,

negli ultimi anni sta prendendo piede l’utilizzo

dei fogli di stile o CSS.

LA SCRITTURA SU WEB

Un elemento che molto spesso crea problemi

alla progettazione web è la dimensione del

testo, poiché l’utente è portato a

personalizzare il testo che si trova davanti,

provocando dei problemi per quanto riguarda

l’accessibilità del sito.

GESTIONE DEI CONTENUTI

Alcune delle unità di misura usate per i

caratteri sono: pixel, punti..

Per quanto riguarda invece i caratteri, utilizzati

per i monitor, i più usati sono Verdana e

Georgia, in quanto garantiscono una buona

leggibilità.

GESTIONE DEI CONTENUTI

Le principali variazioni che vengono effettuate sul testo per renderlo più leggibile e attraente sono:

• la spaziatura tra le righe può essere aumentata per rendere il testo meno denso è più attraente;

• si può aumentare al spaziatura tra i caratteri, o le parole; soluzione, questa, usata soprattutto per i titoli e non per il testo;

GESTIONE DEI CONTENUTI

• si può impostare la prima lettera di ogni paragrafo in

modo che si differenzi dalle altre: ad esempio può

essere impostata più grande e colorata;

• le citazioni possono essere evidenziate da virgolette

particolari (ad esempio più grandi e colorate);

• possono essere inserite righe di divisione che

evidenziano le diverse sezioni di un testo.

GESTIONE DEI CONTENUTI

Le aree principali, all’interno di un sito, sono

organizzate in palette o menu di navigazione, cioè da

un’area presente a sinistra e/o in alto della pagina e

organizzata con una logica da “pulsantiera”.

Queste voci di menu devono essere differenziate dai

link, i quali vengono riconosciuti in quanto

sottolineati ed evidenti rispetto al testo.