Archivi tag: web design

Esempio di progettazione siti Web

Qualche annetto fa scrissi un articolo sulla progettazione dei Layout dei siti Web.

Un sito che ho realizzato recentemente mi da la possibilità di presentare un esempio concreto di progettazione di sito Web e di far vedere che le considerazioni fatte qualche anno fa sono ancora valide benchè il Web viaggi alla velocità della luce.

In allegato trovate una presentazione PowerPoint che ho usato per presentare al cliente in fase di progettazione del sito (NON in fase di sviluppo) la mia idea di layout.

Attenti però, se da un lato l’uso di una presentazione vi aiuta a far comprendere al cliente come sarà il sito e quindi a fargli esporre eventuali considerazioni prima dello sviluppo dall’altro lato dovete essere certi che sarete in grado di sviluppare quello che avete presentato al cliente, altrimenti saranno guai 🙂

Buona visione

Layout di siti e portali Web

Premessa

Il presente tutorial è stato scritto nel 2004 dall’autore con lo scopo di fornire delle linee guida sulla progettazione di pagine web, sono spiegate tecniche di presentazione dell’informazione e metodi di navigazione tra pagine. Le considerazioni esposte derivano dagli studi condotti dall’autore nel campo dell’usabilità e dell’interazione uomo-macchina e da anni dedicati allo sviluppo di interfacce visuali avanzate.

Il tutorial ha un livello di difficoltà medio-basso quindi può essere compreso da tutti.

Introduzione

Oggi la creazione di un sito web è alla portata di tutti. In rete è possibile trovare degli strumenti che permettono, molto semplicemente, la costruzione di pagine web in pochi minuti. Anche la pubblicazione sul web è stata molto semplificata infatti ci sono provider che attraverso pochi click del mouse aiutano l’utente a mettere online il proprio sito.

Tutto questo fa si che sempre più persone si avvicinino alla costruzione di un proprio sito personale ed i risultati sono soddisfacenti; però questi strumenti permettono solo la costruzione di pagine semplici e preimpostate e coloro che li utilizzano, arrivati ad un certo punto, sentono la necessità di dare un proprio stile alle proprie pagine. Andremo tra breve ad esaminare quei concetti chiave per la strutturazione di una pagina web, vedremo in particolare tecniche di presentazione delle informazioni e metodi di navigazione tra pagine. Questo permetterà ai lettori del tutorial di avvicinarsi alla progettazione di pagine web che siano user-friendly ed efficaci nel trasmettere all’utente i concetti e le sensazioni prefisse dal progettista.

Layout di pagina

Il layout generale di una pagina web è visibile in figura 1.

Layout generale di una pagina web

Figura 1. Layout generale di una pagina web

Come possiamo vedere dalla immagine nella pagina si distinguono 5 aree:

  • · Header: questa area occupa circa il 20% in altezza del totale della pagina. Ivi possono essere contenuti un titolo ed un sottotitolo che spiegano il contenuto della pagina, dei loghi pubblicitari ed un menu di navigazione.
  • · Index: questa area occupa circa l’70% in altezza ed il 20% in larghezza. Ivi è presente generalmente un menu verticale che aiuta nella navigazione del sito.
  • · Content: questa area occupa circa l’70% in altezza ed il 60% in larghezza. Ivi è presente il contenuto informativo della pagina.
  • · Other: questa area occupa circa l’70% in altezza ed il 20% in larghezza. Ivi è presente generalmente un secondo menu verticale oppure una area delle news e/o un form di login e/o banner pubblicitari.
  • · Footer: questa area occupa circa il 3% in altezza del totale della pagina. Ivi sono riportati i copyright del sito e link ad email ed a siti associati.

Come precedentemente indicato, questa è la struttura più generale che una pagina web possa avere.

Oltre ad essere la più generale è anche la più completa. E’ particolarmente adatta per portali di grosse dimensioni dove devono essere visualizzate grandi quantità di dati.

Da questo layout derivano delle varianti, nelle figura 2 e 3 sono riportate le due varianti più diffuse.

Figura 2. Variante uno

Figura 2. Variante uno

Figura 3. Variante due

Figura 3. Variante due

La variante uno è quella attualmente più diffusa in internet. Differisce dal layout generale per la assenza dell’area “Other”, questa area viene sfruttata principalmente nei portali per consentire l’accesso ad aree riservate ad utenti iscritti al portale, altro uso tipico è l’esposizione di banner pubblicitari.

La variante due viene impiegata per siti che espongono dei testi voluminosi e risulta necessario molto spazio per una agevole consultazione.

Quindi la scelta di un layout dipende molto dalla quantità di informazione che si deve presentare, meno informazione c’è più semplice è il layout da utilizzare, dove per semplice si intende che la pagina avrà meno aree. Durante la progettazione del layout del sito si deve procedere di pari passo con un altro aspetto molto importante e cioè la tecnica di navigazione di cui farà uso l’utente.

Vediamo ora i principali metodi di navigazione di un sito web.

Metodologie di navigazione

Un utente ragiona per target (obiettivi), quando entra in un sito lo fa con uno scopo e il suo scopo è raggiungere una informazione.

Progettare un buon metodo di navigazione significa aiutare l’utente nel trovare in tempo breve l’informazione di cui necessita e significa anche aiutare l’utente nel sapersi orientare all’interno del sito senza perdersi ma bensi’ muovendosi efficacemente.

Il metodo migliore per far navigare un utente è attraverso l’uso di menu. Presento una tecnica basata su menu in cascata caratterizzata da un menu principale e da menu secondari dipendenti dal primo.

Il progettista deve suddividere il sito in aree tematiche generali, si sconsiglia di presentare più di sette aree tematiche. Ogni area tematica può essere suddivisa poi in sottoaree. Il menu principale presenterà una voce per ogni area tematica individuata. Avremo,invece, un menu secondario per ogni area tematica e sarà composto dalle sottoaree associate alla area tematica in questione. Un concetto importante è che l’utente deve avere sempre visibile il menu principale, detto anche barra di navigazione; questo significa che in qualunque pagina l’utente sia deve vedere il menu principale collocato sempre allo stesso posto.

Generalmente il menu principale è collocato nell’area Header ed è disposto orizzontalmente.

I menu secondari, invece, appaiono generalmente nell’area Index e sono disposti verticalmente (figura 4).

Una sequenza tipica di interazione tra l’utente ed i menu è questa: l’utente clicca su una voce del menu principale, compare il menu secondario associato alla voce cliccatta sul menu principale, l’utente clicca su una voce del menu secondario, viene visualizzata l’informazione ricercata dall’utente. Il criterio appena esposto si può applicare a più di due menu in cascata ma è poco consigliabile perchè quando si raggiungono i tre livelli di profondità l’utente ha difficoltà a navigare agevolmente nel sito (tende a disorientarsi) quindi usate più di due livelli solo quando si ha una mole notevole di dati da presentare. Ovviamente è meglio lavorare su tre livelli con poche voci che su due livelli con tante voci. L’autore preferisce presentare il menu principale e il menu secondario su due livelli orizzontali, il primo sempre visibile e il secondo che compare quando l’utente posiziona il mouse su una voce del menu principale (figura 5). Questa preferenza è dettata dal fatto che cosi’ la navigazione del sito è collocata tutta nell’area Header , viene usato poco spazio e l’utente ha sempre una visione di insieme del menu. Ci sono casi in cui basta il solo menu principale e può essere collocato indifferentemente nell’area Header o nell’area Index. Nel caso di menu complessi è consigliabile realizzare una pagina con la mappa del sito, tale pagina deve essere sempre consultabile dal visitatore.

Figura 4. Menu su due aree

Figura 4. Menu su due aree

Figura 5. Menu su una sola area

Figura 5. Menu su una sola area

Conclusione

In questo tutorial abbiamo visto come progettare il layout di una pagina web a seconda della quantità di informazione che deve presentare, abbiamo inoltre visto come consentire all’utente una navigazione efficace all’interno delle pagine del sito.

Creative Commons LicenseLayout di siti e portali Web by Simone Moretti is licensed under a Creative Commons Attribuzione-Non opere derivate 2.5 Italia License.