Progettazione di un sito web

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 un
format che sia valido per tutte le navigazioni locali.
Nel caso in cui le esigenze siano troppo differenti è
indispensabile una collocazione fissa, come colori o
segni ricorrenti, in modo da lasciare l’interfaccia il più
coerente possibile, cercando comunque di fare una
distinzione 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 realizzazione
di pagine che spieghino di cosa si tratta e che
chiariscano al visitatore dove sta per andare. Inoltre
se i link esterni non sono molti è possibile
configurare il nuovo sito su una nuova finestra, in
modo che il sito di partenza rimanga in background.
REGOLE DELL’INTERFACCIA
• Le parole sottolineate sono link, le parole non sottolineate
non sono link;
• Il logo in alto a sinistra ha la funzione di ritorno alla
homepage;
• Una scritta o un’icona posizionata su un fondo colorato con
effetto 3D è un pulsante ed è cliccabile ;
• I pulsanti indicano aree principali del sito, a differenza dei link
testuali, che indicano percorsi secondari e/o diretti;
• La successione dei pulsanti da sinistra a destra e dall’alto in
basso normalmente indica una gerarchia di importanza o una
successione 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.