Design e User Experience: migliora il tuo Sito in 12 mosse

nessun commento User Experience , , , , ,
img art _Blog_Design_User_Experience

Vuoi migliorare il design del tuo Sito, potenziarne la usabilità e la user experience: quante volte ti sei proposto di farlo?

Approfondisci le tue conoscenze in ambito UX grazie a questa utile guida!

Gli obiettivi principali di un buon web design sono:

  • permettere agli utenti web un’interazione più fluida e veloce.
  • consentire a gli utenti una navigazione più semplice e intuitiva.
  • migliorare la user experience, che significa incrementare le probabilità che gli utenti ritornino sul sito in futuro.

Il raggiungimento di questi obiettivi non consente solo di migliorare la usabilità, ma ha anche un grosso impatto sul SEO del sito.

I nostri UI developers, UX expert e Designer hanno raccolto in questa utile mini guida i loro migliori suggerimenti.

1. Home page

L’home page è l’ingresso principale al sito, tranne che gli utenti giungano sul sito da un altro contenuto postato sui Social Media o su Google. L’home page quindi deve essere curata nei minimi dettagli. Questa pagina è il biglietto da visita del sito e deve dare all’utente un’idea chiara sul tipo di esperienza che potrà avere continuando a navigare sul proprio sito. Bisogna far capire che benefici ci sono per gli utenti e perchè gli utenti devono scegliere questo sito e non quello dei concorrenti.

I fatti stanno a zero, se l’home page è costruita in un certo modo allora l’utente avrà una navigazione piacevole e resterà sul sito, in caso contrario andrà via e si rivolgerà alla concorrenza. L’homepage deve essere ben strutturata da un punto di vista grafico ma non deve essere eccessiva, e soprattutto deve essere chiara nelle informazioni che propone al visitatore. Unique proposition: l’utente deve capire esattamente cosa fa il nostro sito e i vantaggi che ha nell’usarlo. Ad esempio, troppi banner crea confusione (clutter) nel ritrovare i veri contenuti oltre a rallentare il caricamento della pagina.

L’homepage deve essere un punto di ingresso verso l’interno del sito e non una via di uscita! 

2. Navigazione

Idealmente, un utente dovrebbe arrivare sul sito e muoversi al suo interno senza dover pensare troppo.

Avere dei percorsi di navigazione chiari e lineari è una delle indicazioni che Google fa ai Webmaster!

In massimo TRE click l’utente deve arrivare a qualsiasi pagina importante del sito!

Si consiglia un menu generico con le voci principali in cima sia per la versione mobile sia per la versione desktop.

Bisogna anche orientare l’utente, evidenziando la sezione del sito in cui è “atterrato” e mostrare le così dette breadcrumb (letteralmente “briciole di pane” o anche “Percorso di Pollicino”) è una tecnica di navigazione usata nelle interfacce utente. Il loro scopo è quello di fornire agli utenti un modo per tener traccia della loro posizione in un sito/sezione.

3. Valorizzare i testi/articoli

Le pagine web devono essere progettate in modo da facilitarne la lettura. Il testo nero su sfondo bianco è sicuramente una scelta che semplifica la vita al lettore ma non basta.

La formattazione del testo, ad esempio, gioca un ruolo importantissimo perché contribuisce a facilitarne la lettura.

Secondo una ricerca di Jakob Nielsen, gli utenti non leggono ma scorrono i testi sul web.
Il 79% degli utenti web scorrono le pagine web in diagonale (a forma di F, Z o Gutenberg Pattern), solo il 16% legge parola per parola!

I motivi di questa cosa sono abbastanza semplici:

  • La lettura da uno schermo è più lenta rispetto alla lettura su carta e quindi gli utenti tendono a ridurre al minimo il numero di parole da leggere.
  • La vita moderna è piena di impegni e gli utenti non hanno il tempo per leggere tutte le informazioni.
  • La natura umana è pigra e i nostri testi/pagine competono con milioni di altri testi e pagine. Gli utenti non sanno se il contenuto ne vale veramente la pena e quindi invece di sprecare tanto tempo su una singola pagina, scorrono più pagine possibile cercando di scegliere i migliori segmenti in ogni pagina.

In pratica, prima di tutto i lettori cercano di capire se la pagina web possa essere di loro interesse o meno. A quel punto, se hanno trovato sufficienti elementi di rassicurazione, si immergono nella lettura del testo.

Gli occhi dei visitatori hanno bisogno di trovare in una pagina web degli spazi vuoti. Questo gli permette di identificare con maggior facilità le varie aree della pagina, che sono appunto delimitate da questi spazi vuoti.

E’ di grande aiuto quindi:

  • scomporre i testi in paragrafi brevi
  • utilizzare titoli che aiutano l’utente ad individuare l’argomento che gli interessa
  • utilizzare caratteri più grandi e soprattutto un interlinea più grande che aiuta a rendere il testo più leggibile.

Lo standard per i font è di circa 15-16px.

KISS

“Keep It Simple, Stupid” in ambiente informatico, e non solo, è un invito alla semplicità progettuale.

Secondo recenti studi sarebbero necessari solo 5 secondi per avere un’idea generale del sito che abbiamo davanti. Gli utenti tendono a scorrere velocemente la pagina alla ricerca di parole o frasi in grado di catturare la loro attenzione.

Per questo motivo il focus di ogni pagina deve essere chiaro ed inequivocabile, quindi Keep It Simple. Se non si è in grado di “catturare” l’utente in quei 5 secondi è perso per sempre!

E’ necessario che il sito risponda il più rapidamente possibile alle esigenze degli utenti per soddisfarli appieno. Per farlo con successo, bisogna assicurarsi di utilizzare parole chiave chiare e concise per facilitare la ricerca dell’utente. In caso contrario, si ottiene un’alta frequenza di rimbalzo!

Bisogna dimostrare in un attimo all’utente che è arrivato nel sito giusto!

E’ molto importante contrassegnare il testo con:

  • titoli,
  • sottotitoli,
  • parole in grassetto e
  • elenchi puntati.

Il testo inoltre deve:

  • contenere le keywords principali e
  • corrispondere al titolo della pagina, alla meta description e alla URL della pagina. 

4. Velocità di caricamento

Un sito internet lento fa scappare gli utenti.

Il discorso è molto semplice: l’attenzione degli utenti è limitata (si parla di circa 8 secondi) e ci sono molte alternative (c’è una grande concorrenza tra i siti).

Quindi uno degli elementi di maggiore importanza per convincere le persone a rimanere sul sito è fare in modo che il sito funzioni alla perfezione e che garantisca tempi di caricamento molto bassi.

Inoltre, un sito web che carica le pagine in maniera rapida e veloce non annoia, non lascia l’utente appeso ad attendere che il contenuto si scarichi.

Non solo, un sito web lento è un segnale “negativo” anche per Google che tende a premiare in termini di ranking i siti più veloci e a punire i siti più lenti.

Se non si vuole far fuggire le persone dal sito e non metterci mai più piede, bisogna renderlo veloce!

Come? Innanzitutto modernizzando il codice sorgente! 

5. Codice del sito datato

In ottica di velocizzare il sito e anche di modernizzare il codice si consigliano i seguenti linguaggi e framework:

  • HTML 5 e CSS 3 sono le ultime versioni di HTML e CSS diventati degli standard nel 2015. Uno dei più grossi vantaggi dell’ HTML 5 è quello di rendere il codice più semantico e di conseguenza più SEO friendly.
  • Bootstrap è una raccolta di strumenti open source per la creazione di applicazioni per il Web. Essa contiene modelli di progettazione basati su HTML, CSS e Javascript.
  • Material design è un design sviluppato da Google con cui ha declinato la grafica di tutti i suoi prodotti, da Gmail fino al nuovissimo sistema operativo mobile Android Lollipop.
  • Angular è un framework open source principalmente sviluppato da Google con architettura MVC (Model View Controller) e Model–view–viewmodel (MVVM) insieme a componenti comunemente usate nelle applicazioni RIA (Rich Internet Application).
  • PHP 7.1 è la versione più recente di uno dei più popolari linguaggi di scripting.

E il vostro sito come sta? Siete sicuri che utilizzi i framework più moderni? Perchè non chiedere il nostro intervento se il vostro sito è lento e temete che il motivo stia nel fatto che ha bisogno di una “svecchiata”?

6. Pubblicità

Pagine con troppe posizioni advertising creano clutter e rendono la pubblicità inefficace poichè si annullano tra di loro.

Il concetto è molto simile a quello di avere di fronte a sé 5 televisori che fanno vedere 5 spot pubblicitari diversi in contemporanea. Il risultato è che generano confusione e un senso di fastidio, quindi le pubblicità risultano tutte inefficaci.

Troppa pubblicità inoltre fa sì che gli utenti adottino sistemi di blocco della pubblicità che eliminano la pubblicità invasiva e fanno caricare le pagine più velocemente con l’obiettivo di offrire all’utente un esperienza migliore.

Tutti gli esperti concordano sul fatto che non si debba esagerare con l’esposizione pubblicitaria.

Si dovrebbe puntare ad un massimo di 2 banner (3 con la skin).

7. Approccio “Mobile first”

Il web design responsive è oramai uno standard imprescindibile e bisognerà andare oltre e ragionare in un’ottica “mobile first”. Per mobile first si intende sviluppare prima la versione mobile e successivamente adattare il sito agli schermi di tablet e desktop e non il contrario.

E’ risaputo che Google spinge di più i siti responsive (o che hanno una versione mobile) e che tende a penalizzare nel ranking delle ricerche i siti che non si adattano al mobile. Inoltre si pensa che Google inizierà presto ad indicizzare i siti partendo dalla loro versione mobile e non più dalla versione desktop.

Google stesso ha dichiarato per la prima volta le ricerche da mobile hanno superato le ricerche da desktop.

“Less is more” è un motto vero ma difficile da mettere in pratica. Bisogna cercare il più possibile di presentare interfacce pulite e non affollate da troppi elementi.

Questo vale ancora di più sul mobile dove lo spazio-schermo è poco, i tempi di interazione sono ridotti e il puntatore è rappresentato dalle nostre dita.

8. Notifiche in push (Push notifications)

La notifica push è un messaggio istantaneo che arriva al destinatario senza che questo debba effettuare un’operazione di scaricamento (modalità pull). In sostanza non serve più avere un’app per avere le notifiche.

Il messaggio viene inviato da un web service verso un qualsiasi device di tipo mobile, tablet e desktop.

E’ comunemente usato dalle mobile application per consegnare informazioni pertinenti ai propri utenti. Le notifiche compaiono sulla schermata Home o desktop del device dell’utente.

L’aspetto fondamentale da comprendere è che questo strumento vale molto di più rispetto agli altri canali di contatto (ad esempio messaggistica). Le notifiche push, quando usate correttamente, danno alle web app un’opportunità unica di coinvolgimento e comunicazione con i propri utenti.

Le applicazioni mobile dovrebbero usare le notifiche per intensificare l’esperienza d’uso e guidare gli utenti verso un maggiore coinvolgimento, puntando anche ad aumentare le revenue. Per fare questo, le push devono veicolare le informazioni che gli utenti vogliono davvero ricevere tipo pronostici aggiornati, nuova dritta, nuova multipla ovviamente senza esagerare e quindi creare un effetto negativo.

Le notifiche push sono disponibili su tutti i sistemi operativi: iOS, Android, Mac OS, Windows, Windows Phone, BlackBerry.

9. L’importanza delle immagini

Troppe “stock foto” non vanno bene e neanche le foto rubate con i watermarks in bella vista. Una valida alternativa può essere cercare delle foto adatte su Pinterest o flickr, oppure sulle image bank che consentono di usare le foto per le news (dando il credit).

Immagini belle e ad alta risoluzione costituiscono un indubbio elemento di attrazione per gli utenti. Occorre, però, prestare attenzione a bilanciare la qualità dell’immagine con la velocità di caricamento, onde evitare un rallentamento della navigazione che porterebbe inevitabilmente all’abbandono del sito da parte dell’utente.

10. Site maps

Le Site maps vanno mantenute sempre aggiornate. Sia la Site map interna al sito, sia per la Site map pubblicata nella Google console. Molto importante per il SEO generale del sito.

11. Live chat e chatbot.

Una Live chat può essere usata per dare assistenza, guidare l’utenza nella navigazione, rispondere a domande rapide, dare consigli utili (tipo l’esperto risponde), catturare i suggerimenti da parte degli utenti, aumentare l’interattività del sito

I Chatbot o Chatterbot sono dei programmi che possono creare (simulare) una conversazione intelligente tra un essere umano e un robot all’interno di una chat room, messenger, una pagina social o web. Un Bot esegue determinate azioni senza l’intervento umano.

Nello specifico, un Chatbot è un programma che svolge un’attività automatizzata e ripetitiva come per esempio dare le previsioni meteo, indicare l’orario di partenza di autobus/treno/aereo, inviare un alert per ricordare qualcosa all’utente, fare una ricerca online, trovare dei prodotti o servizi e anche fare il broadcast di informazioni. In pratica è un sistema di risposta automatica che dà la possibilità di reperire informazioni e contenuti senza dover uscire dalla pagina.

I Chatbot apportano un maggior valore al sito in termini di User Experience poiché rendono più forte l’engagement con l’utente. I Chatbot consentono di entrare in empatia con l’utente che ha l’impressione di essere “coccolato” dall’azienda e che spesso nemmeno si accorge di interagire con un Bot! Il tutto ad un costo/opportunità bassissimo per l’azienda.

12. Dati strutturati

La marcatutura con dati strutturati è un modo di mettere delle note all’interno delle pagine web, in modo che i motori di ricerca possano meglio identificare la nostra tipologia di contenuti. Nel momento in si inseriscono questi marcatori all’interno della pagina web, Google – e gli altri motori di ricerca – riescono a definire in modo univoco di che tipo di informazione si tratta e la può presentare in modo migliore nella pagina dei risultati della ricerca.

I dati strutturati possono essere a supporto di due funzioni di Google:

  • Migliorare la presentazione nella pagina dei risultati di una ricerca: con l’inclusione di dati strutturati appropriati nei contenuti, si possono migliorare i risultati, inserendo altre informazioni, grazie ai Rich Snippet, ai Breadcrumb o al Form di ricerca per il sito web. Ovviamente anche i Snippet saranno meglio formattati
  • Fornire informazioni a Google per il Knowledge Graph. Il Knowledge Graph si presenta come una scheda informativa in cima o a destra dei risultati di ricerca. In questo box Google, grazie alla ricerca semantica, ci mostra le informazioni che potrebbero essere più interessanti e gli argomenti correlati, basandosi sugli storici delle ricerche degli altri utenti. Come può un’azienda interloquire con Google? Grazie ai dati strutturati può essere l’azienda stessa a fornire a Google le informazioni più rilevanti, cosicchè quando Google esplorerà il sito webb dell’azienda alla ricerca delle info da utilizzare si troverà esattamente quelle che l’azienda vuole mostrare. (loghi, contatti, dati etc…)

Altri suggerimenti:

  • Se avete un Blog, postate gli articoli su tutti gli aggregatori. Individuare sempre nuovi aggregatori e spingere il contenuto in modo sistematico.
  • Aumentare gli internal link negli articoli.
  • Ottimizzate il testo secondo i principi del SEO quando scrivete gli articoli. A questo proposito potete leggere l’articolo recentemente pubblicato sul nostro Blog Cos’è l’ On-page SEO: anatomia di un articolo
  • Verificare l’ottimizzazione su pingdom.

Risorse:

Per approfondimenti leggi anche

Mobile-first indexing

e sul nostro Blog:
Cos’è l’ On-page SEO: anatomia di un articolo
Chatbot per tutti
11 Cose del tuo Sito web che (probabilmente) irritano gli utenti