Piccoli consigli per creare un sito leggibile



200909022009-09-02-018-immagine-1

Visualizzando un sito internet, molte volte e soprattutto quelli amatoriali, ci troviamo di fronte a pagine incomprensibili che fanno quello che vogliono: si aprono, si chiudono, si ridimensionano.

Alcuni piccoli consigli per creare un sito decente possono venire dal buon senso (come evitare i popup pubblicitari), altri possono essere ricavati seguendo questa lista di errori comuni dedicata ai novelli e non solo.

1. Dire in breve che cosa parla il sito evitando lunghe introduzioni: un utente che visita il sito la prima cosa che vuole sapere è di cosa tratta. Perché il tempo è denaro

200909022009-09-02-018-immagine-2

2. Evitare l’uso di caratteri comprensibili: lo stile penalizza la leggibilità e porta l’utente a cercare siti equivalenti più chiari e lineari… evitare, dunque, caratteri troppo piccoli, particolari o lampeggianti.

3. Non ridimensionare le finestre né aprirle e chiuderle senza permesso: tipico esempio sono i popup pubblicitari… talmente scomodi da portare i browser stessi a introdurre lo strumento del “blocco popup”

4. Non richiedere la registrazione se non è veramente necessario e se necessario evita la registrazione automatica a newsletters: è bene differenziare i servizi semplici accessibili a tutti come votare un articolo, da quelli che richiedono una traccia come l’inserimento di un’immagine

5. Non utilizzare troppi contenuti multimediali e non farli partire in automatico: una musica, un video o anche un’animazione in flash con un sottofondo musicale possono dare fastidio se fatti partire in automatico (e in alcuni casi far prendere un accidente se il volume delle casse è alto) appesantendo notevolmente la pagina se utilizzati in modo eccessivo

6. Evita la pagina di introduzione per entrare nel sito: a meno di un sito erotico è il caso di evitare l’inserimento di una pagina di ingresso… quindi cerca di portare l’utente a ciò che vuole con meno click possibile

7. Evita URL troppo complessi: un indirizzo semplice è anche facile da ricordare, per esempio al posto di www.example.com/site/blog?post=23 è possibile scrivere blog.example.com/post/23

200909022009-09-02-018-immagine-3

8. Usa i CSS invece delle tabelle per creare il layout: in questo modo sarà più semplice la scrittura della pagina e più veloce il caricamento

9. Usa un box per la ricerca (possibilmente che funzioni a dovere): per trovare un articolo o una sezione del sito è consigliabile mettere un box di ricerca e controllare che funzioni bene con tutte le pagine del sito.

200909022009-09-02-018-immagine-4

10. Controlla che il tuo sito sia Cross-browser e creane una sola versione: scarica e installa i più comuni browser per controllare che il tuo sito sia raggiungibile da tutti gli utenti e crea una sola versione del sito… HTML o Flash

11. Non usare FrontPage: non è una crociata contro Microsoft, bensì un consiglio spassionato per evitare l’inserimento di centinaia di tags non compatibili che rallentano solo il caricamento (e per evitare le mazzate dalla convalida w3c)

12. Evita il testo “clicca qui” per i link e non confonderli con il testo: il primo è un errore che, lo ammetto, commetto anch’io :) . Meglio utilizzare un testo che abbia un colore differente dal testo normale in cui l’utente sa bene dove sta andando… ne gioverà anche il SEO dei siti esterni.

13. Non sottolineare o colorare il testo normale: a meno che non sia un sito tutto colorato, queste sezioni potrebbero essere scambiate per link e diventa difficile distinguere cosa è cliccabile e cosa no

14. Utilizza gli attributi ALT e TITLE per le immagini: in questo modo, oltre ad avere una maggiore compatibilità con il w3c, viene anche data la possibilità ai non vedenti di accedere al sito e sentire la descrizione dell’immagine al tatto

200909022009-09-02-018-immagine-5

15. Evita lo scorrimento orizzontale: la rotellina della maggior parte dei mouse va solo su e giù, quindi realizzare pagine orizzontali invece di verticali o estenderle oltre il margine destro possono creare problemi durante la navigazione.

Spero siano stati utili… se ne avete altri, potete scriverli nei commenti :)

(Immagine alta: Flicker, Beth Rankin – Recensioni, approfondimenti ed esclusive su Giovdi.it e sul profilo di Mondo Informatico)

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
  • gianluca

    si proprio un utile riepilogo degli errore, grazie

    (ah solo una cosa immagino che nel secondo punto intendessi “evitare l’uso di caratteri POCO comprensibili”)

    Ciao

  • Ciao gianluca,
    grazie per il commento… e per avermi fatto notare la svista, può capitare :D …fortuna che c’è la descrizione dopo che toglie qualsiasi dubbio…
    Ciao

  • E mi raccomando alla scelta dei colori!
    Su uno sfondo nero, un verde scuro o un arancione scuro tendono a rilassare la vista

  • a proposito dei colori in HTML, allego link con tutti i colori più utilizzati e relativo codice esadecimale.

    Esiste inoltre un algoritmo proposto dal W3C per garantire l’elevato contrasto dei colori di sfondo rispetto a quelli dei caratteri. Non è di immediata lettura ma se implementato garantisce di non sbagliare mai nella scelta.

    Complimenti per l’articolo!

    http://users.libero.it/luclep/itaint.htm
    http://www.w3.org/TR/AERT#color-contrast

Pinterest