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.