43 errori di web design che si dovrebbero evitare
Come in tutti i settori lavorativi, anche nel campo del web design si possono commettere errori relativi ad una comunicazione sbagliata o a delle tecniche non propriamente consone, magari per qualche svista possono deprecare l’ accessibilità dei contenuti, del messaggio che con un sito o un blog si vuole passare così da rendere vano per esempio una percentuale di lavoro, di ore spese per realizzare tale progetto.
Questo post è una raccolta di 43 errori (spunti di riflessione) di web design, scritti da DayliBlogTips nell’ aprile 2007, ma ancora attuali ed è per questo che voglio farne un post in italiano da tenere come promemoria, come checklist e condividerla con te che magari sei in cerca di qualche consiglio a riguardo.
http://www.sxc.hu
1. Il flusso dell’ informazione online è veloce, gli utenti cercano su Google ed hanno poco tempo, dedicano una manciata di secondi ad ogni risultato: un grave errore è quello di non permettere all’ utente tramite il nostro sito o blog di capire a colpo d’ occhio di che argomenti trattiamo o che servizi vogliamo proporgli. Dipende non solo dai contenuti testuali, ma imho soprattutto dalla parte grafica, dal logo. Poco tempo e colpo d’ occhio dovrebbero essere i due fattori che ti permettono di creare su misura logo e template.
2. I contenuti del tuo blog non devono essere impaginati come il testo di un libro in un unico blocco: esistono le liste puntate, numerate, i tag html per creare paragrafi, titoli da mettere in rilievo… utilizzali per dare più accessibilità e velocità nella lettura di tali contenuti.
3. Utilizzare fonts troppo pesanti, con troppi orpelli e ghirigori sono da evitare: appesantiscono la lettura e conseguenza l’ utente che naviga il nostro sito o blog prima o poi si stufa e se ne va. Bisognerebbe cercare di trovare un giusto compromesso tra grafica ed accessibilità nei fonts da utilizzare per la creazione di un sito.
4. I siti con i caratteri del testo troppo piccoli fanno scappare i nostri potenziali clienti e lettori, in quanto, come per il punto precedente affatichiamo gli occhi di chi ci legge ed anche se avesse un software per zoomare, diamo ulteriore lavoro al potenziale lettore da feedare e probabilmente non tornerà più per il nostro sito.
5. Evitare di aprire nuove finestre quando un nostro lettore clicca su un link verso una risorsa esterna al nostro domino. La tecnica di far aprire una nuova finestra del browser perchè si vuole visualizzare qualcosa di esterno al nostro sito ormai è deprecata da anni: esiste il bottone “Indietro”nei browsere sicuramente per qualcosa. Evitiamo di far perdere tempo al nostro utente dovendo fargli chiudere una finestra per tornare sul nostro sito, magari mettendolo pure in confusione perchè non capisce la paternità del contenuto sulla nuova finestra.
6. Ridimensionare via js o altri automatismi la finestra del browser del nostro lettore, è da evitare tassativamente: mette a repentaglio fin dai primi istanti la fidelizzazione perchè potrebbe creare confusione all’ utente che cerca di capire il perchè di quell’ auto ridimensionamento della finestra del browser. Evitiamo orpelli, cerchiamo di non perder e far perdere tempo preszioso ai potenziali lettori.
7. Contenuti e risorse sotto chiave consultabili previa registrazione utente sarebbe da evitare se non strettamente necessario sia dal lato lavoro in più per l’ utente che cerca da noi informazioni in pochi secondi sia dal lato indicizzazione sui motori di ricerca per il nostro blog.
8. Siti che creano in automatico registrazioni o sottoscrizioni a qualche servizio, newsletter che proponiamo attraverso il nostro sito sono da evitare: mettiamo in repentaglio il sottile filo che ci lega nei primi istanti col nostro nuovo contatto col fatto che potrebbe aversene a male o risentirsene lato privacy. Il nostro lettore potrebbe pensare “Non ho richiesto esplicitamente di essere iscritto, perchè dovrei accettare indistintamente? Una buona tecnica per perdere contatti.
9. Siti creati in totalità in Flash è meglio evitarli. Usiamo con moderazione tale strumento per evitare appesantimenti al lettore e per dare una spinta in più sostituendoli piuttosto con contenuti testuali o con immagini dove possibile.
10. Musica di sottofondo io le evito in assoluto: fino a qualche anno fa c’erano le colonne sonore prodotte da file midi, ora magari inserita grazie a strumenti come il Flash. Ormai quell’ epoca è finita: tecnica da utilizzare imho in casi veramente particolari e ponderati.
11. Vogliamo far ascoltare audio e far vedere video ai nostri utenti allora diamogli strumenti per gestire in prima persona l’ avvio o lo stop del file in questione.
12. Blog sovracarichi di widget, box sono da evitare: iniziamo caso mai con una grafica scarna, con l’ essenziale, poche cose ma di qualità e poi magari pian piano iniziamo a caricare ma sempre con scelta oculata di cosa, come e dove inserirlo.
13. Le homepage di benvenuto col bottone “Entra” sono da evitare: fanno perdere secondi preziosi al navigatore e aumentiamo la distanza tra lui e i nostri contenuti, i nostri servizi che vogliamo offrirgli.
14. I siti ed i blog anonimi sono snervanti: il lettore vuole trasparenza, vuole chiarezza e vuole capire subito chi c’è dietro: forniamogli tutti i link alle pagine di riferimento dove spieghiamo chi siamo e diamogli subito anche il modo di poterci contattare quanto più velocemente possibile in caso di sua necessità facendogli vedere subito un form contatti o un box sul menu laterale con numeri di telefono.
15. Utilizzare javascript o apertura di nuove finestre non permettono il più delle volte di poter far utilizzare il tasto “Indietro” del browser al nostro lettore: non facciamogli perdere questa funzionalità direi comoda e vitale per lui.
16. Testo lampeggiante o scorrevole sono ormai andati fuori moda da anni ed anni ormai. Evitali a meno che non vuoi far venire un attacco epilettico al tuo potenziale contatto.
17. URL dalla struttura complessa meglio cercare di evitarli sia dal lato mnemonico del navigatore sia per quanto riguarda indicizzazione sui motori di ricerca. Cerchiamo di sfruttare al limite la riscrittura degli URL per renderli user frendly.
18. Non utilizziamo tabelle per creare il layout, ma cerchiamo di utilizzare i fogli di stile, i CSS e le tabelle utilizziamole in maniera ottimale se dobbiamo impaginare e incolonnare dati e numeri.
19. Non dare la possibilità all’ utente di cercare contenuti è meglio evitarlo: forniscigli un motore di ricerca interno al sito o al blog.
20. Menu a tendina evitali se non strettamente necessario: potrebbero distogliere l’ attenzione del navigatore. Meglio magari più menu orizzontali o trovandone una giusta gerarchia e cercando di ottimizzarne l’ integrazione nel template in maniera alternativa.
21. Non utilizziamo immagini come bottoni di navigazione se non ne abbiamo necessità per forza. Link testuali sono la cosa migliore sia come velocità e fruibilità di navigazione sia lato motori di ricerca ed indicizzazione nella loro SERP.
22. Evita di far aprire Acrobat Reader se qualcuno clicca su un link che linka un PDF: rischi di rallentargli la navigazione. Meglio, come per file sonori o video, dare sempre la possibilità di scelta all’ utente magari facendo aprire in automatico piuttosto una finestrella in cui si chiede cosa vuole fare: scaricare o annullare l’ operazione.
23. Evita di dare troppe versioni del sito perchè pensi che ci siano lettori con un 56k o con ADSL o che si colegano attraverso la fibra ottica: imho il sito e le sue pagine debbono essere progettate per essere le più leggere possibili comunque e sempre.
24. L’ integrazione troppo estrema tra contenuti e pubblicita per esempio gli Adsense di Google potrebbero stufare e confondere il navigatore che potrebbe setirsi preso in giro: cerca contenutied informazioni mentr eclicca su banner pubblicitari che gli sembrano link. Da evitare ma ponderare bene come sottoporre la publbicità sul vostro sito.
25. Non creare una gerarchia, una struttura troppo profonda tra categorie di contenuti, menu e sottomenu: cerca di dare la possibilità al navigatore di sapere sempre dove si trova e cerca di snellire la struttura dei contenuti da navigare.
26. Intro, pagine “sala d’ attesa”, loader o immagini gif stile clessidre… sono da evitare se non strettamente necessarie: il navigatore si aspetta subito l’ informazione, il contenuto sotto gli occhi se no va verso altri siti.
27. Se sei alle prime armi comunque non utilizzare FrontPage: crea codice assurdo, poco pulito a livello di html. Esistono svariati software ed ambienti di sviluppo per la creazione di siti e pagine web sia economici che open source.
28. Controlla sempre prima di pubblicare online che sia possibile visualizzare il tuo sito, il tuo blog con svariati browser: non tutti utilizzano il tuo browser preferito. Bisogna evitare problemi di visualizzazione perchè ne va della qualità del sito stesso con tutto quello che ne comporta a livello di immagine.
29. Non inserire un anchor text non pertinente o anche nullo nei tuoi link: mettici sempre le keywords adatte: ne beneficerà sia l’ accessibilità del sito per i tuoi lettori, sia a livello SEO sui motori di ricerca.
30. Evita quanto puoi di “oscurare” la visualizzazione della destinazione di un link: il navigatore, il potenziale nuovo contatto, potrebbe pensare che sia un link affiliazione, pubblicitario: cerca di essere il più trasparente possibile invece con i tuoi lettori.
31. Evita colori tenui che rendono agli occhi del navigatore il tuo sito, il tuo blog troppo omogeneo e poco leggibile: a livello di accessibilità i link ed i colori devono essere equilibratamente contrastanti. Non colori troppo accesi come font bianchi su sfondo nero o link blu su sfondo rosso, ma devi trovare la giusta palette di colori: esistono studi e Google ti può aiutare in tal senso.
32. Testo sottolineato è da evitare se non realmente necessario: potrebbe confondere l’ utente che di solito i link è improntato a vederli sottolineati e potrebbe appunto scambiare quel dato testo come “link non funzionanti”: un’ altra volta confondere il lettore è inutle e controproducente.
33. Per l’ usabilità del sito stesso la cosa migliore è far cambiare colore ai link ogni qual volta vengono cliccati o vengono sormontati dal cursore. Esistono i CSS, i folgi di stile per gestire tale cosa.
34. Se vuoi un sito per nulla professionale utilizza gif animate ovunque sul tuo blog o sul tuo sito: le gif imho le utilizzerei solo su banner pubblicitari o in casi particolari per scelta motivata, ma nulla di più.
35. Dimendicandosi di copilare il meta title, alt per le immagini da un calcio all’ accessibilità del sito e non avrai la spinta e l’ ottimizzazione che potresti avere sfruttando questi campi per l’ inserimento di keywords con cui vuoi posizionarti per esempio su Google per farti trovare sui motori di ricerca.
36. Evita, come per i link, colori troppo contrastanti, acidi: devi trovare delle tonalità che sì si adattino all’ immagine con cui vuoi proporti ma che non siano fonte di irritazione e pesantezza agli occhi di chi vuoi che ti legga. Esistono tool online e siti che ti forniscono esempi di palette di colori: Google ti aiuterà a trovarli.
37. I popup ormai sono morti. Evitali! …anche perchè ormai esistono svariete tecniche, svariati software ed addon per i browser che bloccano il buon 99,9% dei popup visto che all’ utente come avrai ben capito se sei arrivato a leggere fino a qui, non piacciono: lo confondono e gli fanno perder tempo dovendo chiudere le finestre per contnuare con la sua navigazione.
38. Se sei solito utilizzare link in javascript è bene evitarli da adesso in poi sostituendoli con link in html puro: farai contenti gli spider dei motori di ricerca per una miglior indicizzazione delle pagine del tuo sito su di essi.
39. Inserisci nel piè di pagina link funzionali e di primo impatto come per esempio verso la pagina contatti, il link per tornare all ‘inizio della pagina se questa per leggerla bisogna scrollarla col mouse: sarà un valore aggiunto in più per l’ utente a cui fornirai maggiore accessibilità ai tuoi contenuti.
40. Pagine troppo lunghe sono deprecabili. Cerca di mettere sempre nella prima frase, nei primi paragrafi e nella videata che si troverà subito davanti l’ utente, ciò che tratti su quell apagina: digli subito cosa si trova di fronte.
41. Se nel punto precedente è da evitrare lo scroll verticale di pagine e pagine, lo scroll orizzontale e da bandire assolutamente: cerca di trovare la soluzione più adatta con i fogli di stile per un layout fluido o dalla larghezza fissa, ma evita che l’ utente debba scrollare la pagina orizzontalmente per leggere i contenuti: è frustrante imho.
42. Errori di ortografia e grammaticali non possono essere inseriti nel tuo blog, nel tuo sito se vuoi dare un minimo di professionalità e di qualità al tuo progetto, al tuo lavoro. Controlla, rileggi prima di publbicare online: è un lavoro pesante, stressante a volte, ma che da qualità al sito e parallelamente ti permette di crescere, imparare dai tuoi errori.
43. Metodi antispam per i commenti, per il modulo contatti come i captcha sono utili, ma vanno comunque ponderati nel loro utilizzo perchè possono deprecare l’ accessibilità per persone con problemi alla vista. Da utilizzare con ritegno cercando magari tecniche alternative.
Questo ebook è il primo pubblicato da Informatica Friuli dedicato alla personalizzazione di certi aspetti dei template per WordPress.
Questo ebook non deve dare grosse aspettative ...
Non c'è hosting, spazio web dove hai caricato i file del tuo sito, che ti da la garanzia al 100% di posizionarti nella serp di Google al primo posto.
[caption id="" ...
Prendo spunto da quanto si può leggere su MasterNewMedia per quanto riguarda il Newsmaster come la figura che filtra e fornisce ...
Ottimo articolo! Il punto 5 mi lascia un po' perplesso, penso che siano abitudini: da navigatore adoro il target blank: mi permette di leggere una pagina ed aprire eventuali rimandi in altre tab.
E' anche vero che ho imparato a cliccare i link con il tasto centrale per aprli in altre tab…
Grazie per lo spunto di riflessione
Grazie a te per il commento
Condivisione e crescita vanno di pari passo.
Pure io sono abituato con i tab.. ma c'è ancora qualcuno purtroppo che utilizza Exploder (ed anche nelle vecchie versioni che questa funzionalità non supportano ahi loro)
condivido il commento di Account, trovo che sia sempre una scelta da valutare a seconda del contenuto del link stesso