25 cose da tenere presente per l’usabilità del tuo sito

Uno dei web marketer che più rispetto è il mio caro amico Peter J. Meyers (ovvero Dr. Pete).

Non solo è uno dei maggiori esperti di Usability attualmente in circolazione ed ottimo SEO, ma è soprattutto una persona intelligente, divertente e disposta ad aiutarti disinteressatamente.

La sua agenzia, User Effect, offre servizi di Strategic Usability per le imprese. Ovvero, il suo lavoro consiste in trasformare i visitatori di un sito in clienti.

Tra gli strumenti che utilizza, uno dei più interessanti e che maggiori riconoscimenti da parte dell’industria ha ricevuto e riceve è la sua checklist di 25 punti da tenere assolutamente sotto controllo quando si analizza l’usabilità (o usability) di un sito web.

Dal momento che questo strumento con esiste in versione italiana e poiché considero che possa essere di estremo aiuto non solo per i web marketer e web designer italiani, ma anche per tutti coloro che posseggono un sito web e dopo aver chiesto il permesso a Dr. Pete, ho pensato che fosse opportuno presentarne una traduzione italiana.

Usability di un sito web: una checklist in 25 punti

di Dr. Peter J. Meyer

Ho pensato molto ultimamente a proposito del procedimento che seguo nel mio lavoro. L’esperienza è una maestra incredibile, ma è raro che ci si fermi anche solo un istante per cercare di mettere per iscritto ciò che conosciamo. Qualche tempo fa, come parte del lavoro 5-point Website Clinic, elaborai una checklist in 25 punti relativa all’usabilità di un sito standard. Cercavo di dare un metodo alla mia folle confusione ed essere così sicuro di non dimenticare nulla di fondamentale quando lavoravo per un nuovo cliente.

Pur se è parte di uno dei miei servizi a pagamento, ho deciso di condividere questa checklist. Però prima devo dare alcune avvertenze: Primo, non pretendo che questa lista sia completa o unica. Jakob Nielsen creò una fantastica checklist di ben 113 punti per il suo libro “Homepage Usability”, per esempio. Pertanto questa è solo il mio modo di organizzare ciò che importante cercando allo stesso tempo di mantenerla maneggiabile. Secondo, l’uso della terminologia che io faccio potrebbe essere differente da quello vostro. Io utilizzo il termine “usability” (usabilità) in senso piuttosto vasto, e il mio uso del termine “accessibility” (accessibilità) non è proprio quello standard. Non vi piace? Scrivetevi la vostra propria checklist ;). Infine, vi avviso che questo post è alquanto lungo.

Premessa generale

La lista è divisa in 4 sezioni pressappoco uguali:

  1. Accessibilità
  2. Identità
  3. Navigazione
  4. Contenuti

Qui sotto descriverò e razionalizzerò tutte le sezioni e i loro punti corrispondenti, ma potete anche scaricare la checklist come semplice file .Pdf.

Ho cercato di essere il più semplice possibile nel sistema di punteggio:

  1. Green Check = Buono/Analisi superata positivamente
  2. Red Check = È necessario ottimizzare questo punto, ma la situazione non è disastrosa
  3. X Rossa = Male/Analisi fallita.

Inoltre, non tutti i punti sono applicabili a tutti i siti.

Sezione 1. Accessibilità (Accessibility)

Questa sezione non considera solamente i tradizionali problemi di accessibilità di un sito, ma tutto ciò che potrebbe impendire a un visitatore di accedere all’informazione presente nel sito stesso. Se nessuno può caricare il vostro sito, o la tipografia è troppo piccola da leggere… tutta l’usabilità del mondo non ha valore.

1. Il tempo di caricamento della pagina è ragionevole

Chiamatemi della vecchia scuola, ma mi piacciono ancora siti le cui pagine pesano circa 100 KB (e se 60 KB ancora meglio). Se un sito ci mette una vita a caricarsi nel browser, la maggioranza delle persone semplicemente lo abbandonerà. Certo, ormai quasi tutti hanno banda larga adesso, ma questo ha reso la nostra pazienza ancor più corta.

2. Contrasto Testo-Sfondo adeguato

Il grigio scuro o chiaro possono sembrare molto chic, ma io non ho intenzione di rovinarmi la vista leggendo il tuo blog. Esiste un’enorme varietà di gradi di visione e di monitor, perciò è meglio cercare di presentare il contenuto testuale  più importante con gran contrasto. Il buono e vecchio bianco su nero è ancora la scelta migliore il più delle volte.

3. La grandezza delle fonts e lo spazio tra i caratteri facilitano la lettura

Esistono differenti opinioni sulla grandezza ideale del testo, ma è meglio peccare utilizzando caratteri più grandi del consigliabile e non il contrario. Una leggibilià povera è fonte di frustrazione, e la frustrazione conduce ad abbandonare del sito. Inoltre, fate in modo che lo spazio tra i caratteri e l’interlinea sia l’adeguato. Lo spazio bianco è il miglior amico del disegnatore.

4. Flash ed altri effetti speciali sono usati con parsimonia.

Non importa quanto bello possa sembrere il tuo sito, ma la gente non aspetterà 5 minuti perché un plug-in si carichi. Usa le nuove tecnologie solo quando realmente sono utili ad esaltare i tuo obiettivi.  Mantenersi il più possibile fedeli agli standard HTML/CSS è, inoltre, un vantaggio anche per i motori di ricerca.

5. Le immagini devono avere etichette ALT appropriate.

Non solo gli utenti con problemi di visione fanno uso delle etichette ALT, ma anche i motori di ricerca che ne hanno bisogno per capire il senso delle immagini. Questo è un fattore specialmente critico quando si usano immagini come mezzo per mostrare contenuto chiave, come potrebbero essere i bottoni di un menù.

6. Il sito possiede un pagina 404 (pagina non trovata) personalizzata.

Se una pagina del tuo sito non esiste, una bianca con su scritto “404 Not Found” è un ottimo mezzo per perdere un potenziale cliente. Create quindi una pagina 404 personalizzata, preferibilmente una che guidi i vostri visitatori al contenuto principale del sito.

Sezione 2. Identità

Una domanda chiave che uno visitatore si pone quando visita per la prima volta il tuo sito è “Chi sei tu?”. È importante dare velocemente la risposta a questa domanda, e presentare chiaramente il cammino che porta alle risposte delle ovvie domande successive (“Che fai?”, “Perché devo fidarmi di te?”, etc. etc.).

7. Il Logo dell’impresa è presente in un’area preminente della pagina.

Inserisci il tuo Logo o Marca dove sia facile da trovare, ovvero nell’angolo superiore sinistro dello schermo. La gente si aspetta di trovarlo lì, e alla gente gli piace quando gli rendi la vita facile.

8. La Tagline chiarisce lo scopo di un’impresa.

Rispondi alla domanda “Cosa fai?” in modo conciso con una tagline descrittiva. Evita slogan e linguaggio tipo marketing e cucina la tua unica e distintiva ragione d’essere in poche parole. Questo è un vantaggio anche per il SEO della tua pagina.

9. La Homepage si “digerisce” in 5 secondi

In Usabilità spesso parliamo della regola dei 5 secondi. Esisteu una discussione su quanti secondi sono concessi in media ad una homepage per convincere un visitatore a non abbandonarla, ma sono sempre e comunque pochi… ed è quindi necessario usarli per offrire una basica visione della homepage.

10. Deve essere presente una chiara via d’accesso all’informazione sull’impresa.

La tradizionale pagina “Chi siamo” può sembrare noiosa, ma la fiducia è un fattore importante in Internet, e la gente ha bisogno di conoscere facilmente qualcosa di più su di te.

11. Deve essere presente una chiara via d’accesso all’informazione di contatto.

Allo stesso modo, i visitatori vogliono sapere come contattarti nel caso ne avessero bisogno. È anche difficile fare affari se nessuno ti può contattare. Ed è meglio che tutta l’informazione di contatto sia posta sotto forma di testo e non in una immagine; sarà così indicizzata dai motori di ricerca, e questo è ottimo per le ricerche geolocalizzate.

Sezione 3. Navigazione

Una volta che il visitatore sa chi sei e cosa fai, cerca una chiare vie d’accesso al contenuto che gli interessa. L’architettura dell’informazione è un tema enorme, ma questi punti coprono i fattori basilari.

12. La navigazione principale è facilmente identificabile

Praticamente ogni sito possiede un menù principale sin da quando s’inventò il primo browser. Fa che lo strumento di navigazione principale del tuo sito sia facile da trovare, leggere ed usare. E se il tuo sito possiede più di un menù, fa in modo che siano chiaramente differenti.

13. Le etichette di navigazione sono chiare e concise

Non dite “Comunicate online con il nostro team” quando “Contatti” va igualmente bene. I testi del vostro menù principale dovrebbere essere corti, diretti ed intuitivi.

14. Che il numero di Bottoni/Links ragionevole

Gli psicologi amano discutere su quanta informazione noi umani siamo in grado di processare, ma se tu incominci ad avere un menù con più di 7 voci, rifletti attentamente se davvero hai bisogno di tutte loro. E se il tuo menù è composto da più di 3 livelli in dropdown… fatti un favore e riconsidera la struttura di navigazione del tuo sito.

15. Il Logo dell’impresa è collegato alla Homepage.

Questo può sembrare un fattore minore, ma la gente si aspetta che i Loghi linkino alle homepage, e quando non è così si confondono. Per incredibile che possa sembrare, esistono video di persone che insistono una volta sì ed un’altra ancora a cliccare su un Logo  senza alcuna idea di cosa fare al suo posto.

16. I links sono consistenti e facili da identificare

Il classico link azzurro e sottolineato è un’assioma di Internat. Una piccola licenza artistica è ok, ma considera per lo meno che i tuoi links siano o azzurri o sottolineati. I links dovrebbero risaltare, e tu dovresti utilizzarli con parsimonia perché non rompano eccessivamente la continuità del tuo contenuto.

17. Il bottone di ricerca nel sito è di facile accesso.

Se hai un sistema di ricerca nel sito, fa sì che sia ben evidente. Le linee guida della Usability tendono preferire l’angolo superiore a destra della pagina.

Fa che il bottone sia semplice e chiaro: “Cerca” è spesso la scelta migliore come parola… funziona sempre.

Sezione 4. Contenuti

Sicuramente l’hai sentito gia molte volte, e forse è uno dei tuoi mantra: Content is king. Quindi, se non vuoi che il tuo regno scricchioli, allora il tuo contenuto deve essere consistente, organizzato e che possa essere letto velocemente.

18. I titoli principali sono chiari e descrittivi.

Molte persone, la maggioranza, non legge online, ma occhieggia. Usa i titoli (principali e secondari) per separare parti differenti di contenuto ed organizzarlo nella pagina. I titoli dovrebbero essere chiari, e perché siano beneficiosi anche dal punto di vista SEO, si dovrebbero utilizzare le etichette Html per gli headings (<H1>, <H2>, etc. etc.)

19. Il contenuto più importante è posto nella parte alta della schermata (above fold)

Il fold è quella linea immaginaria al fondo del tuo schermo che taglia una pagina web. Il contenuto della stessa può finire al di sotto di quella linea immaginaria, ma tutto ciò che si considera come contenuto principale e critico per capire chi sei o che cosa vuoi (specialmente nel caso della homepage) dovrebbe essere presentato sopra questo fold. Pertanto è osservate bene la risoluzione video media dei vostri utenti.

20. Stile e Colori sono coerenti

Assicuratevi che la gente sappia sempre di essere nel vostro sito grazie alla coerenza del disegno. Confondeteli e li perderete. Il disegno, titoli, e stili dovrebbero essere uguali in tutto il sito. E i colori dovrebbero normalmente avere sempre lo stesso significato. Non utilizzate una testata rossa in una pagina, link rossi in un’altra e testo in rosso da qualche altra parte.

21. Enfasi (grassetto, etc.): utilizzala con parsimonia.

È questione di semplice capacità cognitiva umana: mettere in evidenza il tutto rende il tutto non evidente. Cercate di non fare come quei siti che hanno la scritta “novità” scritta in rosso e che lampeggia al fianco di ogni box di testo.

22. Annunci e Pop-ups sono discreti.

La pubblicità è normale, ma cercate di integrarla con gusto nel disegno del vostro sito. E non obbligate la gente a doversi sorbire i vostri annunci e pop-ups. Anzi, fate un favore ai vostri visitatori e dichiarate apertamente quali contenuti sono pubblicitari. Se diffuminate troppo la linea tra annunci e contenuto vero e proprio, i vostri contenuti ne soffriranno.

23. Il testo principale è conciso ed esplicativo.

Questa non è una lezione di copywrite, ma date uno sguardo alla vostra homepage. Ebbene, potete dire le stesse cose con metà delle parole usate? Cercate di essere concreti e descrittivi ed evitate il gergo professionale… a nessuno gli importa se potete “bilanciare le vostre sinergie”.

24. Le URLs sono significative e user-friendly.

Questo assunto è fonte di dibattito, ma le URLs che si compongono con significative parole chiave in genere sono meglio via per i visitatori del sito che per i motori di ricerca. Non è necessario riprogrammare per intero un sito solo per avere delle nuove URLs, ma cerca di fare il possibile perché siano descrittive e user-friendly.

25- I Title HTML delle pagine sono descrittivi.

Fattore ancor più importante, i Title delle pagine del tuo sito (ovvero il testo associato all’etichetta <TITLE>) dovrebbero essere descrittivi, unici e non infarciti di parole chiave. I Title delle pagine sono la prima cosa che leggono coloro che scoprono il tuo sito grazie ai motori di ricerca, e se questi Title non hanno senso o sembrano spam, è assai probabile che passeranno al link successivo.

2 Comments

  1. Complimenti per l’articolo. OTTIVO LAVORO, DAVVERO. E’ una cosa che avrei sempre voluto fare per i miei clienti ma per mancanza di tempo non ho schematizzato come te.
    La userò sicuramente, nelle mie analisi.
    Grazie

    Reply

Trackbacks/Pingbacks

  1. Tweets that mention 25 cose da tenere presente per l’usabilità del tuo sito | Seo Web Marketing -- Topsy.com - [...] This post was mentioned on Twitter by Gianluca Fiorelli, Gianluca Fiorelli. Gianluca Fiorelli said: http://j.mp/9mTNQh 25-point Website Usability Checklist …
  2. Expo Milan 2015 - [...] 25 cose da tenere presente per l’usabilità del tuo sito | Seo Web Marketing [...]

Submit a Comment

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>