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

Leggere una pagina web non è facile, gli occhi si stancano molto più rapidamente della lettura su carta, se poi ci sono dei problemi di vista diventa quasi impossibile.

Parliamo di come fare l’editing di un testo in Internet considerando le esigenze dei navigatori, ma non dimentichiamo coloro che non navigano per problemi alla vista.

I caratteri – Per lo schermo, per la stampa e le dimensioni

Nonostante l’enorme varietà di font a disposizione, nelle macchine degli utenti sono installati solo alcuni tipi di carattere, quelli più comuni. Quando dovete scegliete il font di una pagina tenete presente che in Internet si legge più agevolmente se il testo è scritto con un carattere a bastone, cioè con un carattere lineare: le lettere sono più grandi, tonde e staccate e si distinguono bene le une dalle altre.

Per la pagina destinata alla stampa il tipo di font più adatto è invece quello a grazie come ad esempio Times New Roman, dove le lettere sono generalmente più piccole, ma le linee sono più curve e armoniose.

Due font, uno per il testo e uno per il titolo, aiutano il visitatore a distinguere immediatamente le diverse parti della pagina, attenzione però a non usare diversi caratteri all’interno del testo: non è soltanto brutto da vedere ma obbliga il visitatore ad abituarsi improvvisamente ad un altro carattere e rallenta la lettura.

In generale consigliamo non più di tre tipi di carattere per pagina: uno per il testo, uno per il titolo e sottotitolo ed eventualmente uno per le didascalie, l’ordine della pagina stimola la lettura. L’editing scelto deve essere coerente in tutto il sito.

Dimensione dei font

La dimensione dovrebbe essere stabilita in percentuale per dare la possibilità d’ingrandire il testo con le opzioni dei browser e permettere a tutti di leggere.

Risalto – Colore e grassetto per evidenziare

In Internet la prima lettura si fa scansionando lo schermo. Inevitabilmente l’occhio cade sulle frasi o sulle parole evidenziate. Per dare rilievo ad una frase o ad una parola chiave consigliamo di usare il grassetto.

Attenzione a non usare la sottolineatura poiché si confonde con i link, lo stesso vale per l’aggiunta di colore; una parola o una frase colorata possono essere lette come link, se così non è l’utente è deluso di non poter avere ulteriori informazioni.

Il colore può essere usato per evidenziare parti di un testo. Una frase o un titolo possono essere riquadrati, staccati dal testo ed evidenziati con uno sfondo colorato, questa è stata la scelta di Fucinaweb.com per mettere in rilievo i diversi articoli di ogni sezione.

Sconsigliamo il MAIUSCOLO che uniforma le lettere in una massa compatta e poco distinguibile per l’occhio ed è sinomimo di “URLARE”.

Alcuni buoni consigli per facilitare la lettura – Allineamento, larghezza delle righe, spazi bianchi

• Allineamento a sinistra (a bandiera) aiuta ad ancorare l’occhio in un lato e accorcia la lunghezza delle righe
• Righe brevi, massimo 50 caratteri, la lettura rallenta se si deve cercare l’inizio della riga successiva
• Organizzare il testo secondo dei contrasti visivi in modo da aiutare la comprensione immediata del testo: gli spazi bianchi aiutano ad organizzare la pagina e gli elenchi puntati o numerati permettono la scansione dei contenuti.
• Gli spazi bianchi sono consigliati:
  • per facilitare la lettura allo schermo
  • per permettere la scansione della pagina
  • per distinguere i paragrafi
  • per metter in evidenza una frase staccandola visivamente dal testo
• L’interlinea consigliato per la leggibilità è di 2 punti in più del carattere (es. carattere 10, interlinea 14)
• I rientri sono utili per far capire l’inizio di un nuovo paragrafo o per mettere in evidenza una frase. Modificando la larghezza delle righe di una frase si comunica una particolarità del testo

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

Colori – I colori sicuri, la retinatura, l’usabilità

Gli schermi dei computer più recenti permettono di vedere moltissimi colori, ma non tutti possiedono un computer recente e qualcuno ha un computer con scheda video potente ma con le vecchie impostazioni del monitor.

Non siamo certi quanti e quali colori appaiono nello schermo di ogni utente, così dobbiamo ancora ragionare secondo gli standard.

Quasi tutti gli schermi permettono di vedere 256 colori (ad ogni pixel vengono dedicati 8 bit di memoria).

I browser gestiscono i colori basandosi su una tavolozza da 8 bit. 256 è il limite massimo della tavolozza di colori, ma le versioni dei sistemi operativi riservano 40 colori per l’interfaccia, perciò 216 sono i colori sicuri per tutti i browser.

Photoshop 6 contrassegna i colori sicuri con un puntino nella palette Colore, ma se si usa Salva per il web è sufficiente controllare i colori dalla finestra.

Retinatura

E’ il metodo più usato per ridurre le immagini ai colori sicuri, cioè si sovrappongono dei pixel di colore diverso per riunirli in un terzo e unico colore. Un pixel bianco e uno nero daranno l’illusione di valori di grigi, senza alterare troppo l’immagine nel suo complesso.

La retinatura dev’essere realizzata con i 216 colori standard, poiché se si scelgono colori diversi dalla palette di riferimento, il browser non li riconosce e legge l’immagine secondo le impostazioni standard.

L’usabilità con i colori

I colori, come in qualsiasi altro media, possono facilitare la lettura, la comprensione e la navigazione. Si legge più facilmente uno schermo se il testo è scuro su sfondo chiaro, quindi se i contrasti sono forti e netti.

Da evitare un testo rosa su sfondo verde, poiché non soltanto è difficile da leggere e stanca gli occhi, ma i daltonici non potranno riconoscere il testo.

Per le regole di accessibility del web rimandiamo ad un corso in preparazione.

La directory di navigazione è solitamente di colore diverso dalla parte dedicata alle informazioni, per una comprensione immediata della pagina (se vuoi saperne di più nella lezione precedente abbiamo parlato d’impaginazione).

Immagini – I file Gif e Jpeg, quando usarli, come usarli, le strategie, le compressioni

I formati di file Web principali sono GIF e JPEG, vediamo le caratteristiche e come usarli.

File GIF:

• Limitati a 256 colori
• Si possono comprimere, rendendoli molto leggeri, senza perdere di qualità dell’immagine
• Supportano il colore trasparente, per far emergere lo stesso colore di sfondo della pagina
• Sono consigliabili per immagini schematiche con forti contrasti di colori
• Usali per i bottoni di navigazione e imagemap

File JPEG:

• Supportano 16,8 milioni di colori (24 bit per ogni pixel)
• Possono essere molto compresse, ma a discapito della qualità
• Compressione a perdita, quindi i dati eliminati dopo la compressione sono perduti
• Compressione ideale per immagini con pochi contrasti e senza bordi netti
• Usali per fotografie, immagini di grandi dimensioni e di alta qualità

Immagini interlacciate

Le immagini sono le più lenti da caricare, specie con i modem più diffusi, perciò è utile ridurre i tempi di attesa con l’interlacciamento.

E’ un metodo di composizione delle immagini GIF o JPEG che compaiono sullo schermo a bassa risoluzione e lentamente diventano più nitide. Non abbiamo bisogno di aspettare che si compongano interamente per capire cosa raffigurano e decidere così se continuare o fermarsi.

Le GIF di navigazione sono leggere, piccole e non hanno bisogno di essere interlacciate, poiché sarebbero più lente da caricare.

Consigliabile, invece, interlacciare le immagini JPEG, per le loro stesse caratteristiche.
In Photoshop 6 nella finestra Salva per il web c’è l’opzione per l’interlacciamento

Animazioni GIF – Quando usarle e come

Le animazioni posso essere utili per far vedere un’evoluzione o anche solo un oggetto a tutto tondo (consigliabile per l’e-commerce).

La maggior parte delle animazioni richiede un plug-in particolare per poter essere visualizzata, eccetto le animazioni GIF. Queste sono la combinazioni di immagini GIF in un unico file per creare una successione automatica delle immagini.

Si può impostare l’immagine GIF in modo che l’animazione si riproduca continuamente (i banner) o solo una volta e si può anche stabilire la durata di ogni fotogramma.

Un’animazione GIF, però, non offre controlli all’utente, che deve subire l’animazione fino alla fine senza possibilità d’interromperla, inoltre questo tipo di file non effettua la compressione tra fotogrammi.

Se un’animazione GIF è la combinazione di 5 immagini da 18 KB l’una, l’animazione sarà di 90 KB.
Troppe animazioni, specie se vicine al testo, disturbano l’attenzione dei lettori, quindi è consigliabile un uso attento.

E’ meglio che le animazioni siano visibili da una finestra secondaria che l’utente potrà chiudere quando vuole.

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.