Scopri, attraverso questi esempi, come le Analisi di Usabilità possono individuare problemi impensati e le correzioni da apportare al sito

La valutazione di usabilità è un metodo euristico per individuare le difficoltà che incontrano gli utenti di un sito web non usabile, durante la navigazione e nell’utilizzo generale del sito.

Fare una valutazione è un sistema veloce per migliorare l’usabilità e quindi sia le performance del business online che l’esperienza utente perchè permette di capire, ad esempio, cosa tiene lontani i visitatori dagli acquisti e perchè la pagina web viene abbandonata.

In questo articolo presento 4 casi in cui mi è stato chiesto di valutare l’usabilità di un sito web.

#1. Caso di Studio

Questa valutazione euristica di usabilità riguarda un sito web con il problema della cecità ai banner. Vediamo perchè questo sito è poco usabile sin dalla prima impressione e non favorisce la generazione di lead (contatti).

Prima Valutazione

Il colore richiama il vino, il logo e il payoff sono in posizione di rilievo e permettono di capire facilmente di cosa parla il sito.

Individuare le cose importanti è molto difficile perchè il sito è sovraffollato di elementi tutti tra loro simili nelle forme e nel colore. L’impressione è di aver capito di cosa parla il sito ma anche che sarà difficile trovare le informazioni.

La valutazione di usabilità ha rilevato una pagina affollata di elementi e banner laterali che non si distinguono dal sito
La valutazione di usabilità ha rilevato una pagina affollata di elementi e banner laterali che non si distinguono dal sito

Perchè è fastidioso guardare una pagina affollata?

Con uno sguardo gli occhi hanno abbracciato tutti gli elementi in primo piano mentre la visione periferica ha individuato le parti laterali della pagina. Le parti laterali sono identiche tra loro, hanno gli stessi colori e le stesse forme.

I visitatori dei siti web si sono ormai abituati ai banner e alle varie forme di pubblicità, sanno che sono una perdita di tempo e hanno imparato ad ignorarle. Sono diventati abilissimi in questo.

Il lettore capisce che le informazioni sono nella parte centrale o all’interno del menù ma le scritte sono tutte piccole e il riquadro testuale nell’area di maggior priorità della pagina (in alto al centro) è molto stretto. I colori violacei messi come sfondo ai titoletti dei vari box sono tutti identici tra loro. Questo provoca uno sconforto nel lettore che deve fare uno sforzo di concentrazione per individuare quello che cerca. Allo sforzo di concentrazione si aggiunge anche lo sforzo visivo dovuto alla dimensione del carattere e ai testi scorrevoli (non si vedono nelle mie immagini ma ci sono testi scorrevoli).

Individuazione della Chiamata all’Azione

L’unica chiamata all’azione è stata messa nella posizione meno visibile: nella colonna laterale destra sotto dei banner che hanno lo stesso colore violaceo del titolo dell’invito all’azione (link email subscription)

La valutazione di usabilità rileva una chiamata all'azione invisibile
La valutazione di usabilità rileva una chiamata all’azione invisibile

Valutazione di Usabilità del Menu

Il menù principale ha un colore blu che stacca dal violaceo. Meno male. Però tutti i titoli dei riquadri testuali hanno uno sfondo violaceo e hanno un aspetto bombato che ricorda dei pulsanti d’azione. Questo va contro il modello concettuale dell’utente secondo cui i titoli non hanno sfondi e i pulsanti devono essere cliccati per compiere un’azione. Oltre questo c’è da dire che la scritta su sfondo colorato vivace è tipica dei banner e quindi non viene notata dal lettore per lo stesso principio di cecità ai banner.

Nella valutazione di usabilità ho rilevato che i titoli hanno uno sfondo fuori dal modello concettuale dell'utente
Nella valutazione di usabilità ho rilevato che i titoli hanno uno sfondo fuori dal modello concettuale dell’utente

Conclusioni della valutazione di usabilità

Sebbene il colore sia azzeccato perchè ricorda il vino, la densità degli elementi nella pagina è troppo elevata e ci sono troppe aree simili tra loro nei colori e nelle forme. Muoversi in questo sito è davvero fastidioso.

#2. Caso di Studio

Questa valutazione di usabilità riguarda un sito one page, ossia con home page molto lunga le cui sezioni costituiscono tutto il contenuto del sito web e sono visibili continuando a scrollare unicamente la home page.

Prima valutazione di usabilità dell’one page web site

La prima impressione è gradevole perchè la grafica del web design è curata e i colori sono rilassanti con dei toni più intensi solo nelle aree di maggior rilievo (call to action).

Valutazione di usabilità della Home page

valutazione di usabilità della parte top della home page
valutazione di usabilità della parte top della home page

Il sito ha una home page molto lunga con sezioni a blocchi alte circa come il monitor. Queste sezioni possono essere visualizzate una per volta scorrendo la pagina, come se fossero tutte delle home page diverse. Ci sono pareri contrastanti sull’usabilità di questo tipo di soluzione. Il difetto principale è che per trovare le informazioni il lettore è costretto a scorrere la pagina sino in fondo.

Errori di Traduzione

Trattandosi di un sito multilingua la prima cosa che ho fatto per valutare l’usabilità è stato mettere l’italiano. La tagline è incomprensibile, troppo tecnica. Questo probabilmente è dovuto ad una traduzione poco accurata che lascia un’impressione negativa ai visitatori italiani.

Valutazione del Messaggio

Mission e tagline, al di là delle traduzioni sbagliate, sono ben fatti. I punti di forza sono espressi chiaramente e con aspetto grafico gradevole. Peccato che siano nella parte sotto della home page e siano invisibili se non scrollo la pagina. Potevano essere riportati sul menù principale.

con la valutazione di usabilità si rilevano anche i punti di forza
con la valutazione di usabilità si rilevano anche i punti di forza

Valutazione della Call to action

La call to action più evidente è nella parte inferiore della home page. Ben fatta. Peccato che sia talmente in fondo alla pagina che non si veda.

valutazione di usabilità negativa per la call to action posta in fondo alla home page
valutazione di usabilità negativa per la call to action posta in fondo alla home page

Altri inviti all’azione sono presentati nelle pagine interne. Su tutte, in fondo, c’è un modulo contatti. E’ una buona cosa che ci sia ma è poco evidente. Andrebbe riposto all’interno di uno sfondo diverso dal bianco e grigio chiaro, in modo da attirare l’attenzione del lettore.

La valutazione di usabilità rileva che il modulo contatti si confonde col resto della pagina e risulta invisibile
La valutazione di usabilità rileva che il modulo contatti si confonde col resto della pagina e risulta invisibile

Valutazione usabilità del Menu

Il menù principale è poco leggibile, il font è poco leggibile (light, il contrario del grassetto bold), con colore che risalta poco sullo sfondo. C’è poco contrasto tra font e sfondo.

valutazione dell'usabilità del menù: font poco contrastato
valutazione dell’usabilità del menù: font poco contrastato

Valutazione usabilità delle pagine interne

La grafica delle pagine interne differisce da quella utilizzata per la home page. Sono stati utilizzati font diversi in uno spazio ristretto e i box grigi messi a colonna potevano essere evitati o postati in un’altra posizione. Se si trattava di info rilevanti potevano inserirle nel testo in grassetto o anche con uno sfondo ma seguendo la direzione di lettura senza causare una rottura delle aree informative.

valutare l'usabilità della pagina: distribuzione degli spazi confusionaria
valutare l’usabilità della pagina: distribuzione degli spazi confusionaria

Conclusioni della valutazione di usabilità

Il sito in generale è gradevole d’aspetto ma nelle parti interne sembra che la cura messa nella home page sia venuta a mancare. La traduzione sbagliata mi dà decisamente un’impressione negativa. La strutturazione delle pagine poteva essere più organizzata evitando una home così densa e dispersiva e inviti all’azione poco visibili.

 

Questo caso di studio riguarda un ecommerce del settore food e in particolare prodotti tipici alimentari italiani.

valutare l'usabilità di un sito del settore food
valutare l’usabilità di un sito del settore food

Prima impressione: intoppi tecnici?

Il sito si è aperto con un popu-up che mi ha impedito di capire se ero arrivata nella home page che mi interessava. Le slide della home page si caricano molto lentamente e per qualche secondo dietro al pop-up ho visto un’immagine caricata a metà.

Prima impressione: sono sul sito giusto?

La tagline è chiara a metà, non ho capito subito lo scopo del sito sebbene si capisca che parla di cibo italiano.

Prima impressione: impatto emotivo dei colori?

I colori al primo impatto sono un po’ freddi, non fanno venire l’acquolina in bocca. Solo dopo ho capito il gioco del bianco rosso verde come la bandiera italiana. L’ho capito dopo probabilmente perchè la home page è molto ricca di immagini e contenuti per cui orientarsi non è stato immediato.

Valutazione usabilità della Home Page

L’home page è ricca di contenuti sotto forma di immagini. L’area di maggior visibilità è occupata tutta da figure e il testo non si legge. I box in evidenza sotto le slide sono link a pagine di approfondimento ma il link è affidato unicamente all’immagine, senza testo scritto. La cecità ai banner sviluppata dagli utenti rende poco visibili queste aree perchè i box vengono ignorati.

in questa valutazione di usabilità i box immagini sono meno visibili dei box testuali
in questa valutazione di usabilità i box immagini sono meno visibili dei box testuali

Valutazione di usabilità della parte top della home page

La casella di ricerca è messa centrale. Solitamente è in angolo alto a destra. Abituata così mi sono trovata spaesata quando ho provato a cercare un prodotto mentre navigavo per il catalogo. Il numero verde invece non è al centro e con un colore che stacca dal resto del design. E’ stato messo in angolo a destra e non è molto visibile. Dovrebbe essere l’elemento più importante.

valutazione usabilità: header top con posizioni non standard
valutazione usabilità: header top con posizioni non standard

L’icona a forma di casetta che rappresenta la home page, sostituisce la home page ma è molto vicina alla voce di menù Azienda. Quando ho cercato di tornare alla home page continuavo a cliccare su azienda ma mi ricordavo che cliccando sul logo veniva fuori una pagina diversa. Questo mi ha creato un po’ di confusione.

Valutazione di Mission e Tagline

La tagline è troppo corta. Bisognerebbe aggiungere un paio di parole per specificare cosa fa il sito (vende? aggrega? promuove? educa?). La mission è nascosta sotto l’area di visibilità e si raggiunge solo scorrendo la pagina, cosa che di solito pochi utenti fanno.

Valutazione della Call to action

Le chiamate all’azione come “iscriviti alla newsletter” e “ricevi il coupon di sconto” sono messe in un’area invisibile, nella colonna sinistra in fondo ad una home page già molto ricca di colori e contenuti.

valutazione Usabilità: call to action nascoste
valutazione Usabilità: call to action nascoste

Valutazione delle Informazioni utili al visitatore

Le informazioni che un visitatore vuole avere quando acquista online sono invisibili. Non c’è nel footer un elenco di link diretti ai corrieri, le consegne, le garanzie, i recessi. Bisogna andare nella pagina assistenza clienti per capirlo. Le spese di spedizione sono omesse. Non viene mai specificato nemmeno sul carrello. Questo è molto fastidioso per l’utente e sicuramente un motivo ad abbandonare l’acquisto.

la valutazione di usabilità rileva che le spese di spedizione non sono segnalate
la valutazione di usabilità rileva che le spese di spedizione non sono segnalate

Valutazione usabilità delle pagine internet

La grafica interna tende a differenziarsi dall’aspetto della home page con un mix di stili troppo abbondante. Questo porta confusione e la sensazione di disordine.

la valutazione di usabilità rileva che la grafica interna è dissimile da quella della home
la valutazione di usabilità rileva che la grafica interna è dissimile da quella della home

Valutazione usabilità del Footer

La partita iva e la ragione sociale sono messe in angolo in basso a sinistra mentre l’utente è abituato a vederle al centro in basso. Se non le vedrà potrà pensare che l’azienda non è affidabile.

la valutazione di usabilità mette in evidenza che le credenziali in posizione non standard
la valutazione di usabilità mette in evidenza che le credenziali in posizione non standard

Conclusioni della valutazione di usabilità

Il sito ha delle potenzialità. E’ fatto con cura e ha dei buoni prodotti. Mancano delle migliorie importanti: la ridefinizione delle aree di visibilità e l’evidenziare le informazioni per l’utente, sopratutto le spese di spedizione. I banner con i coupon e la newsletter vanno messi in evidenza come meritano essendo la fonte principale per la generazione di lead.

#4. Caso di Studio

Ho valutato l’usabilità di un ecommerce che vende prodotti farmaceutici. Questo case history è interessante perchè permette di analizzare alcune caratteristiche di un negozio online.

valutare l'usabilità di un ecommerce farmaceutico
valutare l’usabilità di un ecommerce farmaceutico

Prima impressione: intoppi tecnici?

Il sito si è aperto subito senza problemi.

Le slide della home page non hanno problemi a caricarsi.

Prima impressione: sono sul sito giusto?

La tagline è chiara e il logo rinforza la comprensione.

L’immagine della slide aiuta facilmente a capire di cosa si tratta.

Prima impressione: impatto emotivo dei colori?

La scelta dei colori bianco e grigio con qualche bordo colorato è gradevole. Le tonalità scelte sono adatte al mercato farmaceutico.

Valutazione Intestazione

I contatti non sono in evidenza perchè inseriti in un menù secondario in alto alla pagina e in colore grigio su sfondo grigio. Il numero verde è bene visibile ma non è in posizione centrale. La struttura dell’intestazione è stata un po’ rimescolata rispetto agli standard cui è abituato l’utente:

  1. la casella di ricerca non è in angolo a destra ma centrale;
  2. il login non è in angolo in alto a destra ma più sotto attaccato al pulsante cerca;
  3. il “farmacista risponde” accanto al numero verde non fa capire se il numero verde serva anche per le difficoltà tecniche o amministrative che può avere l’utente;
  4. il menù secondario è troppo nascosto perchè grigio su sfondo grigio. Solitamente il menù secondario è in alto a destra accanto al login. In questo caso il contrasto è troppo poco e risulta invisibile anche perchè troppo appiccicato al bordo top della pagina.
valutazione di usabilità: disposizione dell'intestazione pagina con doppio menù
valutazione di usabilità: disposizione dell’intestazione pagina con doppio menù

Valutazione usabilità della Home Page

L’home page è ricca di contenuti. Le informazioni importanti sono messe nell’area di maggior visibilità: informazioni d’acquisto e categorie prodotti. Solo una slide è importante perchè racchiude uno slogan e delle informazioni per l’acquisto. Le altre sono banner e non sono utili all’utente. Inoltre la slide principale ha il testo incorporato nell’immagine risultando invisibile al motore di ricerca e agli ipovedenti con uno spreco di opportunità.

la valutazione di usabilità rileva slide significativa ma con descrizione non testuale
la valutazione di usabilità rileva slide significativa ma con descrizione non testuale
valutazione usabilità: nessun tag alt che descriva il contenuto dell'immagine
valutazione usabilità: nessun tag “alt” che descriva il contenuto dell’immagine

Valutazione Inviti all’azione

La call to action come “iscriviti alla newsletter” pecca di mancanza di dettagli e anche di un titolo sebbene sia incorniciata in modo evidente. Andrebbe in ogni caso resa più in contrasto rispetto al resto con un colore più invitante all’azione.

valutazione usabilità: call to action senza un titolo o un colore evidente
valutazione usabilità: call to action senza un titolo o un colore evidente

Valutazione dell’usabilità del carrello e dell’acquisto

Le informazioni che un visitatore vuole avere quando acquista online sono visibili anche nella scheda prodotto.

valutazione usabilità: informazioni utili all'acquisto in scheda prodotto
valutazione usabilità: informazioni utili all’acquisto in scheda prodotto

Proseguendo nella scheda prodotto si hanno altre informazioni utili all’acquisto come il costo delle spese di spedizione. Tuttavia bisognerebbe mettere in maggior risalto le linguette grige di questo menù con caratteri bianchi poco visibili. Bisognerebbe scrivere chiaramente le spese di spedizione già sotto il prezzo del prodotto.

valutazione usabilità scheda prodotto: altre informazioni utili all'acquisto
valutazione usabilità scheda prodotto: altre informazioni utili all’acquisto

Valutazione usabilità delle pagine interne

Nelle pagine interne mancano le colonne. Mantenere il menù di sinistra che si ha in home e nelle schede prodotto è sempre una buona idea per l’utente dato che costituisce un punto di sicurezza per lui.

Valutazione usabilità del footer

La partita iva e la ragione sociale sono messe al posto giusto in basso al centro. Il sevizio clienti è richiamato anche se andrebbe messo in maggior risalto. Le modalità di pagamento e di acquisto sono ben visibili.

valutazione usabilità footer: informazioni importanti e attività social
valutazione usabilità footer: informazioni importanti e attività social

Valutazione usabilità del Checkout

La fase finale dell’acquisto (checkout) riassume tutte le informazioni importanti. E’ giusto fare in modo che l’utente abbia tutto a portata di mano ma a mio parere questa soluzione è troppo concentrata e porta a confusione. In questo caso bisognerebbe usare una soluzione a una sola colonna anzichè tre colonne attaccate.

valutazione usabilità fase finale (checkout) dell'acquisto: troppo confusa
valutazione usabilità fase finale (checkout) dell’acquisto: troppo confusa

Conclusioni della valutazione di usabilità

Il sito è fatto con cura e ha un impatto positivo. Mancano alcune migliorie per mettere in evidenza le zone importanti poco visibili. La newsletter e i contatti vanno messi in evidenza come meritano essendo la fonte principale per la generazione di lead.

Approfondimenti

Fai un test sul tuo sito web: prova la mia checklist per valutare l’usabilità.