PROGETTAZIONE DI UN SITO WEB

Транскрипт

1 PROGETTAZIONE DI UN SITO WEB

2 UN BUON SITO DEVE AVERE DUE CARATTERISTICHE: USABILITA ACCESSIBILITA Navigazione fluida con contenuti facilmente reperibili. Organizzazione dei contenuti e predisposizione degli strumenti devono consentire il facile uso della pagina.

3 ALTRE CARATTERISTICHE SONO: Facilità d accesso Velocità d accesso Navigabilità Affidabilità Interattività Semplicità Coerenza

4 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.

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

6 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.

7 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).

8 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.

9 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.

10 TESTOE 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.

11 TESTOE 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.

12 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.

13 Gerarchica:le pagine sono ramificate in modo gerarchico, ovvero suddivise in sezioni e sottosezioni. Questa tipologia di struttura è la più diffusa sul web.

14 Reticolare:o circolare, tutte le pagine del sito sono collegate tra loro, da ciascuna di esse si può andare su un altra qualunque.

15 L INTERFACCIA L interfaccia di navigazione viene definita come l insieme degli strumenti che consentono all utente di capire i contenuti e lefunzionidiunsitoeaccedervi.

16 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.

17 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.

18 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.

19 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.

20 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 effetto3dèunpulsante 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.

21 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, cliccandosulla voce opportuna all interno della mappa.

22 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.),

23 USABILITA DI UNA PAGINA WEB Perché una pagina sia usabile sono necessari deglielementichenefacilitinolaletturaela fruizione.

24 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.

25 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.

26 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;

27 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.

28 GESTIONE DEI CONTENUTI Lo strumento principale, usato per l impaginazione su Web è quello delle tabelle, negli ultimi anni sta prendendo piede l utilizzo deifoglidistileocss.

29 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.

30 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 sonoverdana e Georgia, in quanto garantiscono una buona leggibilità.

31 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;

32 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.

33 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.