giovedì 10 aprile 2014

Sito aziendale? 5 chicche di usabilità

5 chicche per l'usabilità del tuo sito webFacilità di navigazione e comunicazione visiva di un sito web aziendale sono fondamentali per convertire i tuoi utenti, ossia per motivarli ad acquistare, a contattarti o a lasciarti i loro dati.

Il fattore determinante del successo di un sito, infatti, coincide sia con la presenza di buoni contenuti che con una loro ottima usabilità.

Tutto sta nel concepire il tuo sito come un luogo fisico in cui le persone possano orientarsi con sicurezza nel giro di pochi istanti: a parità di buoni contenuti, con un'usabilità migliore potrai incrementare il tuo tasso di acquisizione di nuovi clienti.

Immagina di essere in un ristorante, in un negozio o in un hotel; sei di fretta, devi trovare al più presto ciò che stai cercando, e desideri al contempo sentirti bene accolto e avere una sensazione positiva, del tipo: sì, ho scelto il ristorante/negozio/hotel perfetto per me e le mie esigenze.

Ecco: il tuo sito aziendale deve comportarsi in questo modo, rivelandosi immediatamente comprensibile, facile "da girare" e psicologicamente accogliente, costruito quasi su misura per il tuo target. Dimentica l'idea di sito come biglietto da visita statico, e dai un'occhiata a queste 5 chicche di usabilità: ti aiuteranno a rendere il tuo sito uno strumento di lavoro vantaggioso per la tua azienda e una buona esperienza per chi lo andrà a visitare.

1. Disposizione degli elementi

L'Eye Tracking è una tecnica che permette di tracciare il movimento oculare, sia a livello di spostamenti (saccadi), che a livello di fissazioni. Gli occhi ci aiutano a:
  • recepire le informazioni
  • stimolare processi emozionali interiori
  • prendere decisioni individuali

La tecnica dell'Eye Tracking è utile per comprendere l'attenzione che i nostri occhi (estensione fisica del cervello) riservano ai vari elementi presenti sullo schermo; in sostanza, serve per scoprire cosa attira la nostra attenzione e quali zone di un sito guardiamo maggiormente. In base a queste informazioni, possiamo lavorare sulla disposizione degli elementi al fine di migliorarne l'usabilità.

Ora, non si tratta di eseguire sul tuo sito un'analisi specifica come questa, ma di recepire, mentre prosegui con la lettura dell'articolo, alcune nozioni utili per la disposizione degli elementi nelle tue pagine web.

Gli studi del settore dimostrano che, guardando una homepage, gli occhi si concentrano in principio sulla zona più in alto a sinistra (la zona solitamente riservata al logo), per poi spostarsi via via verso la destra.

Eye Tracking: zone di maggiore importanza per l'occhio
Secondo l'Eye Tracking, quindi, il cervello umano (parliamo del mondo occidentale, abituato a leggere da sinistra verso destra) considera più importante ciò che trova sulla sinistra del monitor. Cosa hai posizionato in questa parte decisiva del tuo sito?

Anche il cosidetto "Schema a F" o "F-Pattern" ci conferma tali dati: nell'immagine qui sotto, puoi vedere le mappe di calore corrispondenti alle zone più osservate di alcune pagine web. Come è evidente, tali zone assumono all'incirca la forma di una F.

Schema a F per migliorare l'usabilità dei siti aziendali
Ma non finisce qui. Se la zona in alto a sinistra è l'area ottica più osservata, secondo la Legge di Gutenberg gli elementi inseriti nella parte più in basso a destra sono percepiti dall'utente come più vicini e quindi vengono notati con maggiore facilità.

Ecco perché spesso le call to action vengono inserite in questa parte della pagina:

Applicazione della legge di Guntenberg nel web design

2. Organizzazione degli spazi

Per rendere usabili i tuoi contenuti è necessario organizzarli tenendo conto degli spazi: non trattare testi, immagini e grafica come piastrelle con cui tappezzare ogni punto del tuo sito ;-)

Utilizza il white space, lo spazio vuoto che separa gli elementi che compongono la pagina. Serve per dare aria ai contenuti, aumentare la loro visibilità e donare all'utente una sensazione di compostezza e facilità di consultazione.

Dosandolo al meglio aiuterai l'occhio del visitatore a concentrarsi e a mettere a fuoco ciò che ti interessa evidenziargli, come titoli, immagini e moduli da compilare.

Apple, al solito, ce ne dà uno splendido esempio. L'"aria" tra un elemento e l'altro crea un percorso oculare rilassato e per nulla "dubbioso" sul da farsi, tutto è estremamente logico e intuitivo, costruito col preciso scopo di invitarci cliccare su ciò che ci interessa.

Utilizzo del white space per l'usabilità dei siti aziendali
Utilizza il white space come i silenzi ad effetto all'interno di una conversazione, come una pura questione di vuoti e di pieni che danno ritmo e significato.

Chiaramente, il white space non coincide con lo "sfondo bianco". Eccone infatti un esempio di utilizzo in un sito per nulla white ;-)

esempio di utilizzo del white space, lo spazio vuoto

3. Impaginazione

Quante colonne utilizzare nel tuo sito? Quale disposizione risulta la più usabile per il tuo utente?

Guida l'attenzione con l'impaginazione
. Se il white space ha lo scopo di non rendere i tuoi contenuti troppo ravvicinati e quindi caotici e pressanti, gli allineamenti servono per creare un flow visivo che dia una sensazione di ordine logico e, quindi, di facilità di navigazione.

A questo fine, puoi utilizzare:

  • allineamenti
  • immagini e icone
  • forme e colori
All'occhio piace la stabilità. Quando le cose sono in ordine, il cervello le recepisce automaticamente come "belle, piacevoli".

Chiaramente, stabilità non significa staticità, e una limitazione non è un freno ma uno stimolo. L'obiettivo è rendere il tuo sito uno strumento di lavoro, e affinché il sito lavori, deve essere fatto per funzionare bene sotto gli occhi e i click dei visitatori.

Un allineamento ricorrente è la griglia, struttura capace di mettere ordine e dare importanza a più contenuti al contempo. Eccone un esempio da Google:

Utilizzo della griglia per rendere usabili i contenuti
Un'altra forma di allineamento è il rettangolo aureo, basato sulla sezione aurea. La sezione aurea è un rapporto armonico presente in natura in piante, animali e corpo umano, che il cervello recepisce a livello ancestrale come una proporzione rassicurante.

Nel web design si può tradurre nel tipico sito a 2 colonne, come questo:

Utilizzo della Sezione Aurea nel web design

4. Scelta dei colori e delle immagini

La scelta dei colori influisce notevolmente sull'usabilità del tuo sito. Ovviamente, il tuo brand avrà già dei colori e quindi le tue decisioni dovranno tenerli sempre presenti.

Alcune linee guida sui colori:

  • valuta combinazioni di colori già esistenti in natura
  • massimo 3/4 colori
  • uniformità di uso in tutto il sito
  • usa i contrasti per attirare l'attenzione dove ti interessa (call to action, pulsanti di condivisione sociale, offerte speciali, ecc...)
  • crea variazioni cromatiche con fine d'uso, mai fine a te stesse
Le immagini contribuiscono alla comunicazione e all'usabilità del tuo sito, perché hanno il potere di riassumere in sé concetti, atmosfere e significati che stai dando nei testi.

Alcune linee guida sulle immagini:

  • evita le immagini stock di repertorio
  • se proprio devi utilizzare immagini stock, personalizzale il più possibile
  • altissima qualità: niente immagini sgranate, devi essere professionale
  • forte attinenza con i contenuti della pagina (l'immagine deve aggiungere significato a ciò che è scritto)
  • evita di sovrapporre testi alle immagini (bassa leggibilità)
L'utilizzo di immagini di repertorio è sconsigliato

5. Titoli e testi

Dimensione = importanza!

Crea gerarchia visiva nelle informazioni che stai dando variando la dimensione dei caratteri: non solo aiuterai il visitatore a "scansionare" più velocemente i tuoi contenuti, ma gli suggerirai anche cosa deve ritenere più importante. Non lasciare all'utente il compito di scegliere, suggeriscigli tu il miglior percorso di lettura, come fa qui Amazon:

Gerarchia dei testi: dimensione = importanza
Oltre alla dimensione, altro fattore su cui lavorare per rendere usabili i tuoi testi è la formattazione.

Secondo i dati Nielsen, il 79% delle persone non legge i contenuti di una pagina web, ma li scansiona. Agevola tale operazione con un intelligente utilizzo della formattazione:
  • evidenzia con i grassetti, evitando corsivi e testi sottolineati
  • riserva i testi sottolineati solo ai link, soprattutto se blu
  • utilizza sempre lo stesso colore per i link: rappresentano uno degli elementi più attraenti, quindi ti conviene renderli immediatamente riconoscibili
  • evita di giustificare il testo, meglio l'allineamento a sinistra
  • non allineare al centro
  • utilizza elenchi puntati e numerati: alleggeriscono la lettura e aiutano a focalizzare

In conclusione


Abbiamo visto qui 5 chicche di usabilità per rendere un sito aziendale un valido strumento per l'acquisizione di nuovi clienti, un luogo dove la comunicazione funziona.

Non si tratta di applicare tali spunti tutti assieme, ma di selezionare una via e adottarla per semplificare la navigazione e quindi la lettura dei contenuti. Un processo leggero e non faticoso non potrà che migliorare la user experience del tuo sito, facendo crescere le possibilità di successo dei tuoi processi di conversione.


Fonte Blog Dolphin 

Nessun commento:

Posta un commento