Far navigare il visitatore

Questo articolo fa parte di un corso gratuito di design web ospitato su questo sito.

Le pagine interne – L’impaginazione più adatta ai vostri siti

Un’impaginazione semplice ed esaustiva è una delle regole principali per essere visitati da un gran numero di utenti.

E’ nelle pagine interne che dobbiamo soddisfare le esigenze di informazione, perciò il layout deve tener conto della tipologia di contenuti definendo la presentazione e la navigazione.

Qualche esempio

  • Un sito di medicina dovrà presentare i contenuti attraverso immagini e disegni, imagemap e schede di approfondimento, magari con il consiglio di un esperto, una scheda farmacologia e un video – impaginazione con grandi immagini accompagnate da didascalie, schede e file multimediali.
  • Un sito di e-commerce dovrà contenere immagini dei prodotti, schede comparative e schede tecniche del prodotto, oltre alla pagina di acquisto – impaginazione con grandi immagini, molto spazio alle informazioni tecniche, che devono essere dettagliate e complete.
  • Un sito di poesia conterrà molto testo, contenuti lunghi e schede biografiche e un servizio di informazione e recensione sulle novità bibliografiche – impaginazione per testi lunghi (nelle dimensioni accettabili dal web), commenti e ipertesto.

Ogni tipo di contenuto richiede un’impaginazione specifica per facilitare la navigazione e l’informazione del visitatore.

L’utente può entrare nel sito senza passare per la home. Per questo in tutte le pagine ci devono essere logo e nome del sito, la funzione di ricerca e la directory di navigazione.

Il layout – Ogni spazio ha la sua funzione

La maggior parte dei siti ha la directory di navigazione in verticale sul lato sinistro dello schermo, il logo e il nome del sito in alto e il contenuto al centro.

Questo tipo d’impaginazione è la più diffusa, poiché si è dimostrata la più usabile dall’utente. Egli infatti comincia a leggere dall’alto, dove trova il nome del sito, e da sinistra (nel mondo occidentale) dove sono presenti i bottoni della navigazione e la maggior parte dello spazio viene lasciato alle informazioni.

Fucinaweb ha la directory di navigazione a destra per dare più rilievo ai contenuti e perché sfrutta un layout liquido, ma l’aspetto è identico in tutte le pagine e lo sfondo della directory distingue nettamente la parte di navigazione (sfondo nero) da quella dei contenuti (sfondo bianco).

L’utente ha imparato a navigare ancorandosi a questa tipologia di layout (layout a tre pannelli) e presentare un sito con un’impaginazione molto diversa lo costringe ad imparare una nuova navigazione con tempo e pazienza.

Fatelo se volete essere creativi ed innovativi, ma tenete conto del pubblico a cui vi rivolgete, come si è detto nella prima parte del corso.

Le tabelle – L’impaginazione a larghezza fissa e il design liquido

L’impaginazione viene costruita attraverso le tabelle HTML: la maniera più semplice per organizzare tutti gli elementi di una pagina web.

Il layout a tre pannelli è una tabella con tre celle principali: una per il contenuto, una per la navigazione e una per il logo.

Larghezza fissa

Ignoriamo il browser o le opzioni scelte dall’utente per la visualizzazione della pagina Web e la tabella di layout può subire delle modifiche rispetto al progetto iniziale: si allarga o si restringe a seconda delle dimensioni del browser, modificando l’impaginazione e l’aspetto.

Per mantenere la pagina fedele al progetto iniziale si costruisce una tabella a larghezza fissa:

  1. definire la larghezza delle celle con valori assoluti, cosicché la cella non si deformerà allargandosi troppo
  2. per impedire che la cella si riduca, inserire un’immagine invisibile della stessa larghezza della cella, in ogni cella della tabella <img width="lunghezza_desiderata" height="1" alt="" src="trasparente.gif">
  3. la tabella deve essere sempre impostata con BORDER=”0″ nel tag TABLE

Liquid Design

Una tabella a larghezza fissa è la più semplice per realizzare il layout, ma se si vuole che l’impaginazioni cambi secondo la dimensione del browser allora dovete affrontare il design liquido (Liquid Design). Lo consigliamo vivamente perché facilita la lettura a video, evitando lo scrolling orizzontale. È inoltre fondamentale nella realizzazione di siti accessibili.

Provate a modificare le dimensioni del vostro browser, vedrete come si modifica l’impaginazione di Fucinaweb.

La costruzione con layout liquido è sicuramente più impegnativa rispetto a quella fissa: avrete meno controllo sulla presentazione, ma guadagnerete in visibilità e audience.

Le metafore – I simboli per il friendly web

Le metafore sono un modo diverso di far capire la funzionalità e il contenuto di un sito attraverso simboli e immagini, che rendono il web più familiare. Le metafore possono essere molto utili per il visitatore che può capire in breve tempo il sito e navigare facilmente.

Semplicità e familiarità sono i criteri principali per l’uso delle metafore, devono cioè appartenere al mondo familiare e conosciuto dell’utente, altrimenti si costringe il visitatore ad imparare il messaggio delle metafore per capire il sito.

Gli esempi più diffusi di metafore sono il simbolo del carrello della spesa per indicare e-commerce e quello della busta per l’email: attenzione quindi ai simboli più usati nel web, perché sono i più riconoscibili dagli utenti.

La Home Page

Questo articolo fa parte di un corso gratuito di design web ospitato su questo sito.

Splash Screen

La pagina di benvenuto, che spesso ci accoglie prima di entrare in un sito, è la splash screen.
Se consideriamo che l’utente ha fretta di ottenere le notizie e che la splash screen non permette la navigazione, è difficile capirne la funzionalità.
Consigliamo, quindi, di non crearla per un sito facile e immediato che si rivolge ad un ampio pubblico.

La splash screen è più appropriata per un pubblico di esperti – magari di designer – per i quali può essere utile sottolineare le proprie capacità grafiche e tecniche.

Un altro uso è quello di informare l’utente riguardo i contenuti delle pagine prima che entri, come succede per i siti per adulti.

Regole basilari per la realizzazione della splash screen:

  1. date la possibilità di saltare l’introduzione con lo “skip intro”
  2. rendete la splash screen informativa sui contenuti del sito, con testi e immagini esplicativi
  3. non cadete nella tentazione di una grafica ridondante e animata, rallenta la connessione al sito e non è strettamente necessaria per attirare l’utente
  4. fate in modo che sia solo una breve introduzione, lunga circa 5 secondi, passati in quali automaticamente si entra nella home del sito.
La Home Page

Non si è certi in quale punto del sito entri l’utente, ma è molto più probabile che cominci la navigazione dalla home e questa deve rispondere a tutte le aspettative (riguardo l’home page Jakob Nielsen e Marie Tahir hanno scritto un manuale da tenere sempre a portata di mano).

Cosa non deve mancare in una home

  1. nome del sito, logo
  2. slogan o titolo che comunica immediatamente l’area d’interesse del sito
  3. menu di navigazione
  4. la funzione di ricerca
  5. le novità o promozioni

Tipi di home

La home deve immediatamente comunicare il contenuto del sito, per questo è importante definire la struttura di home più adatta. A seconda che il sito sia prevalentemente d’informazione o sia ricco di servizi, la home presenta una disposizione delle informazioni e della navigazione diversa.

  • Home a menu: è una lista di collegamenti alle pagine interne o mappe grafiche
  • Home informativa: spazio alle informazioni più recenti (indicato per un sito di news) con collegamenti agli approfondimenti e alle altre notizie
  • Home a percorsi: divisa in aree d’interesse, che permettono all’utente di scegliere il tema o il servizio da visitare (indicato per siti grandi o con contenuti molto diversi)

Divisione dello spazio

Le diverse funzioni delle pagine web – navigazione, pubblicità, contenuti, news ecc. – occupano lo spazio dello schermo secondo le necessità.
Considerando lo spazio della navigazione e della pubblicità come un unico campo, in home page si dovrebbe dedicare almeno il 30% della pagina ai contenuti.
Nelle pagine interne diminuisce l’esigenza di promozione e si dà più spazio ai contenuti: almeno il 60%.

La navigazione

Molti utenti prediligono cercare le informazioni con la funzione di ricerca, che dev’essere sempre presente in tutte le pagine del sito, ma altrettanti preferiscono navigare. Guidate l’utente per far capire dov’è, dove è stato e dove può andare.

Dove sono:
  • nome e logo del sito (nelle pagine interne è link alla home),
  • mostrare parte della struttura del sito (come fosse una mappa con in evidenza la sezione che si sta visitando),
  • nel <title> scrivere il contenuto, la pagina e il sito (in quest’ordine)
Dove sono stato:
  • link alle pagine visitate hanno un colore diverso da quelle non viste
Dove posso andare:
  • directory di navigazione,
  • link,
  • collegamenti fissi (pagine precedente e successiva; meglio se si anticipa sotto il collegamento il contenuto delle pagine [nuova finestra])

Ampiezza del sito e profondità

  • Ampiezza: collegamenti alle diverse sezioni del sito
  • Profondità: navigazione in una sezione del sito, indicando i vari livelli. La navigazione cosiddetta a “briciole di pane” è la più usata per indicare la profondità di una sezione fornendo un elenco orizzontale dei diversi livelli: home » pagina di 2° livello » pagina di 3° livello » pagina di 4° livello

Consigliamo di indicare sia le sezioni del sito, sia i livelli della sezione che si sta visitando, offrendo contemporaneamente una navigazione in ampiezza e in profondità.

I frame

Pro:
la separazione del contenuto dalla navigazione fornisce un facile accesso alle informazioni del sito. Tecnicamente i frame semplificano la costruzione della pagina, poiché i contenuti posso essere aggiornati senza compromettere la grafica e la navigazione.

Contro:
i frame sono nemici dell’usabilità, infatti una pagina a frame non è stampata correttamente e non è indicizzata (letta per essere catalogata nei risultati della ricerca) dai maggiori motori di ricerca. È anche impossibile aggiungere la pagina nei “preferiti” del browser.

Per ovviare a questi limiti è fondamentale creare una versione del sito anche senza frame.

Lo spazio dello schermo

Questo articolo fa parte di un corso gratuito di design web ospitato su questo sito.

Lo spazio della pagina

Prima di disegnare una pagina Web dobbiamo sapere quanto spazio c’è a disposizione. Il designer deve fare i conti con:

  • La grandezza degli schermi
  • Gli offset
  • La Taskbar di Office
La grandezza degli schermi

Un buon progetto Web facilita la lettura sullo schermo rispettandone le dimensioni per non dover usare la barra di scorrimento orizzontale, che impedisce una visione d’insieme della pagina. Gli schermi più diffusi sono di 640×480 pixel o 800×600 e questa misura è chiamata “area sicura”: lo spazio, cioè, entro il quale la pagina Web può essere vista senza alcun problema.

Gli offset

I browser occupano la parte alta dello schermo e un lieve contorno sui lati, inoltre aggiungono automaticamente uno spazio bianco tra l’interfaccia e la grafica della pagina: questo spazio si chiama Offset. Purtroppo i browser non hanno la stessa dimensione di Offset e ogni sistema operativo impone regole proprie.

Oltre agli Offset, è anche utile calcolare lo spazio occupato dall’interfaccia dei browser, per sapere le effettive dimensioni della pagina Web.
E’ possibile eludere il problema degli Offset arricchendo il tag “body” con alcuni attributi:

<body marginwidth=”0″ leftmargin=”0″ marginheight=”0″ topmargin=”0″>

Attenzione però: questi attributi non sono standard. Se li usate, il vostro codice Html non sarà valido, anche se funzionerà senza problemi in tutti i browser.

In questo modo gli Offset di tutti i browser vengono annullati ad eccezione di Navigator 3 su entrambe le piattaforme.

La Taskbar di Office

La Taskbar di Windows è la barra dei collegamenti ai programmi di Office ed è predefinita a meno che non si voglia eliminarla. Questa occupa spazio sul lato destro dello schermo.
Ecco lo spazio a disposizione, con e senza la Taskbar, nelle diverse versioni dei browser di entrambe le piattaforme:

Taskbar Browser 640×480
larghezza
640×480
altezza
800×600
larghezza
800×600
altezza
Con Tutti 557 270 717 390
Senza Da versione 4 Win 600 275 760 395

La differenza tra le dimensioni di una pagina con la Taskbar visibile in tutti i browser è poco più piccola di una pagina accettata da pochi browser e senza la barra di Office.
Per il Web designer vale lo spazio che trova il maggior numero di visitatori, perciò quello visibile con tutti i browser.

Stampare da Internet

Si legge meglio sulla carta che sullo schermo ed è per questo che le pagine Web ricche di contenuti spesso vengono stampate.

  • I margini impostati dalle stampanti in un normale foglio A4 verticale, non permettono di riprodurre una pagina Web in tutta la sua larghezza: 2 cm del lato destro dello schermo non si stampano
  • E’ consigliabile produrre due versioni di tutti documenti più lunghi: una per lo schermo e una per la stampa (in formato PostScript o in PDF). Quest’ultima dovrebbe contenere l’intero argomento, che online è diviso su diverse pagine.
  • Le dimensioni della pagina Web devono adattarsi ai margini di stampa, perciò la larghezza massima di una pagina Web, stampata verticalmente, è di 595 pixel.
Progettare la grafica del sito
  • Un pubblico di ricercatori e di studenti visiterà il sito per ottenere informazioni e guarderà svogliatamente la grafica o, peggio, andrà altrove se il contenuto è soffocato dal design.
  • Un pubblico in cerca di un viaggio vorrà sentirsi stimolato e non soltanto vedere elenchi di offerte o di voli aerei; una grafica accattivante, pur mantenendosi pulita e chiara per la leggibilità delle informazioni, è più adatta alle esigenze degli utenti.
  • Pensare all’aspetto generale del vostro sito, significa dare anche un’immagine di voi. Un’azienda che offre prodotti sanitari darà un’impressione di poca serietà se si presenta in Internet in maniera ludica e con uno stile fumettistico. Al contrario un’agenzia di design può osare una grafica più ricca e tecnologie avanzate, per dimostrare la propria creatività e capacità tecnica.
Organizzare il sito a schermate

La barra di scorrimento orizzontale è intollerabile nella lettura di una pagina Web, quella verticale è un po’ scomoda, ma utile per dare spazio ai contenuti senza frammentarli in troppe pagine.
Quando si accede ad un sito si vede solo la parte alta della pagina; è facile intuire che le notizie più importanti ed i link per la navigazione devono stare nella prima parte della pagina.

  • Fate in modo che le novità o le promozioni del vostro sito siano subito visibili in alto nella pagina e spezzate la videata in modo coerente, iniziando un nuovo paragrafo o inserendo altre notizie nella parte inferiore.