Come migliorare l’esperienza utente su WordPress

Se il tuo sito WordPress ti sembra bellissimo e hai la certezza che i tuoi contenuti siano super utili eppure le persone lo abbandonano poco dopo esserci entrate, forse hai un problema di UX (User Experience).

Potrebbe sembrarti strano, ma la realtà è che un sito visivamente gradevole non è necessariamente piacevole da usare per gli utenti. E può anche darsi che i tuoi contenuti di valore non siano facili da trovare con la navigazione interna, o persino che non siano adatti a essere letti con le modalità tipiche del digitale.

Migliorare l’esperienza utente su WordPress, e ovunque sul web, può fare da anello di congiunzione tra un bel sito e un sito che funziona. Ecco perché in questa guida vedremo tutti i motivi per cui vale la pena di investirci, come analizzare la situazione di partenza e quali buone pratiche applicare per risolvere tutti i problemi di UX.

Perché migliorare l’esperienza utente su WordPress

Se sul tuo sito la navigazione è facile e piacevole, gli utenti tenderanno a restarci più a lungo, a tornarci e a rispondere meglio quando li inviti a compiere un’azione. Saranno più propensi a lasciarti i loro dati e delle recensioni positive.

Poiché l’esperienza utente su WordPress è uno degli aspetti considerati da Google nel valutare un sito, miglior UX significa anche miglior posizionamento SEO e quindi maggior visibilità.

In sintesi una buona esperienza utente su WordPress ti permette di aumentare le visite al sito e di far sì che i tuoi contenuti conquistino l’attenzione e i risultati per cui li hai creati.

A questo punto non ti sarà difficile capire perché l’esperienza utente e la SEO on-page vanno a braccetto quando si tratta di aumentare il traffico al tuo sito WordPress, e anche di ottenere conversioni.

Come migliorare l’esperienza utente su WordPress

Sono tante le azioni che contribuiscono a migliorare l’esperienza utente su WordPress però possiamo riassumerle così: 

• conoscere meglio i visitatori ideali del nostro sito;
• analizzare la nostra UX attuale;
• applicare una serie di buone pratiche. 

Conoscere meglio gli utenti

Un aspetto tanto ovvio quanto trascurato nella costruzione dei siti web: per offrire una buona esperienza utente su WordPress dobbiamo sapere chi vogliamo portare e far restare il più a lungo possibile sulle nostre pagine.

Creare le user personas

Se non l’hai ancora fatto, puoi iniziare la tua analisi dell’utente creando delle user personas, cioè profili di clienti ideali che ti aiutino a visualizzare bisogni, abitudini e preferenze di persone che potrebbero far parte del tuo target.

La forza di questo modello sta nel costringerti a ricordare che il tuo pubblico è composto da singoli esseri umani; infatti ogni scheda dovrà avere un nome e rispondere alle domande:

• Quanti anni ha e dove abita?
• Qual è il suo livello di istruzione?
• Qual è la sua situazione familiare?

Inoltre dovrai capire:

• cosa vuole ottenere questa persona dal tuo sito/prodotto/servizio;
• e il motivo di fondo per cui l’obiettivo è importante;
• cosa potrebbe scoraggiarla;
• cosa manca nelle soluzioni che ha già provato.

E in particolare riguardo all’esperienza utente:

• come questa persona usa i dispositivi digitali;
• cosa la farebbe restare e cosa la porterebbe ad abbandonare subito una pagina;
• che tono di voce e stile preferisce. 

Dopo aver costruito le tue user personas sarai di certo più consapevole di cosa cercano i tuoi utenti e di come vorrebbero trovarlo.

Raccogliere le opinioni degli utenti sulla UX

Inoltre potresti chiedere direttamente alle persone che visitano il sito di raccontarti le proprie impressioni e darti suggerimenti per migliorare l’esperienza utente, con domande mirate come:

• Questa pagina ti è stata utile?
• Quali altre informazioni speravi di trovare?
• È stato facile trovare quel che stavi cercando?

È nato proprio per questo UserFeedback, che oltre a essere un plugin per le recensioni in WordPress, permette di creare sondaggi e visualizzarli sulle pagine in modo che gli utenti possano compilarli senza interrompere la navigazione. I questionari possono prevedere risposte aperte o a scelta multipla e sistemi di valutazione con punteggi, stelle, ecc.

La versione gratuita del plugin offre alcuni modelli utili da cui partire:

• Website Feedback
• Website Experience
• Content Engagement.

Chi usa la versione pro del plugin, invece, può sfruttare anche un template per i feedback specifico per raccogliere impressioni sul design del sito. 

Ad esempio questo è il template gratuito da cui puoi partire per creare un sondaggio sull’esperienza utente sul tuo sito WordPress:

Per raccogliere le opinioni degli utenti potresti sfruttare anche un plugin per creare form su WordPress, Google moduli o una delle alternative a Google Moduli che abbiamo recensito.

Non sempre questi software sono tradotti in italiano al 100%, ma se dovessero restare stringhe in inglese nei moduli per gli utenti, puoi sistemarle con il plugin gratuito Loco Translate per una migliore UX.

Eseguire un audit UX

Il primo passo per migliorare l’esperienza utente su WordPress è avere un quadro chiaro della situazione attuale. Quello che ti serve per capire a che punto si trova il tuo sito in termini di usabilità e velocità è un audit UX: un’analisi che prevede sia test manuali che l’uso di software gratuiti o freemium.

Puoi verificare le prestazioni del sito e trovare le cause di eventuali rallentamenti con Google PageSpeed Insights o WebPageTest, scoprire quali pagine non hanno una buona esperienza utente con Search Console e persino vedere come si muovono gli utenti sul tuo sito WordPress con Hotjar e le sue mappe di calore.

Test di usabilità manuale

Per iniziare dovresti testare le funzionalità del tuo sito man mano che le implementi come se fossi un visitatore che le vede per la prima volta. Si tratta di simulare il comportamento dell’utente mentre cerca di raggiungere un certo contenuto per informarsi, un certo prodotto per acquistarlo oppure mentre compila un modulo di contatto, cerca di scaricare una risorsa gratuita ecc.

Con un’analisi di questo tipo puoi renderti conto di eventuali difficoltà delle persone sul sito nel trovare le informazioni, interpretare i testi o capire dove cliccare. Potresti anche accorgerti che il percorso per raggiungere un obiettivo è troppo lungo o contorto.

Prendi nota delle criticità per poterle risolvere. 

La cosa migliore sarebbe far provare le funzionalità a persone esterne che non hanno partecipato alla progettazione e realizzazione del design e osservare come si muovono sul sito. Non è facile però trovare un numero di utenti disposti a fare da cavia tale da fornire informazioni che abbiano rilevanza statistica, soprattutto considerando che sarebbe meglio fossero persone del tuo target. 

Ecco perché sono nati strumenti che permettono di ‘spiare’ – in modo anonimo – gli utenti che navigano sul sito.

Hotjar e le mappe di calore

Hotjar è uno strumento di analisi comportamentale applicata ai siti web che ti aiuta a capire se il tuo funziona o meno osservando come navigano i tuoi utenti.

Come spieghiamo più in dettaglio nella guida a Hotjar per WordPress, questo tool permette di registrare le azioni compiute sul sito da un utente lungo un percorso (clic, movimenti, scroll). 

Inoltre rappresenta i movimenti degli utenti sul sito attraverso le heatmap, le mappe di calore che mostrano in quali aree della pagina web si concentrano le attività e l’attenzione dei visitatori.

Le mappe aiutano a capire quali contenuti ottengono più coinvolgimento, per esempio rappresentando con campiture colorate le aree in cui si registrano più clic o la porzione di pagina effettivamente visualizzata dalla maggior parte delle persone.

Non solo, le heatmap servono anche a individuare possibili cause di frustrazione perché mettono in luce elementi e aree in cui si registrano clic ripetuti.

Per attivare Hotjar dovrai inserire il suo codice di tracciamento all’interno del tuo sito, come faresti con il pixel di Facebook.

La versione gratuita ha limitazioni al numero di sessioni che si possono monitorare e registrare, però offre mappe di calore illimitate.

Uno strumento alternativo a Hotjar è Microsoft Clarity Analytics, molto chiaro e del tutto gratuito.

UserFeedback invece ha introdotto le heatmap di recente solo per i clienti Elite.

Google PageSpeed Insights

Non è un caso se il principale strumento di Google per misurare la velocità dei siti web – PageSpeed Insights – è anche uno dei tool più consigliati per valutare l’esperienza utente. Rispettare certi standard nelle prestazioni è infatti un prerequisito per poter offrire una buona UX. 

Come abbiamo visto in dettaglio nella guida a PageSpeed Insights (PSI), è dedicata proprio all’esperienza utente la prima sezione del tool. Qui trovi i famosi Core Web Vitals (CWV) e due metriche complementari: parametri che misurano la velocità del sito da vari punti di vista e sono anche fattori di ranking.

Il primo CWV è il Largest Contentful Paint (LCP), che ti dice quanto tempo impiega l’elemento più grande visibile nella finestra a essere visualizzato e dovrebbe essere inferiore ai 2,5 secondi.

L’Interaction to Next Paint (INP) invece valuta il tempo impiegato dalla pagine nel rispondere alle interazioni dell’utente e dovrebbe essere sotto i 200 millisecondi.

Il Cumulative Layout Shift (CLS) è l’ultimo CWV e indica se, e di quanto, gli elementi si spostano durante il caricamento. È considerato buono sotto 0,1.

La prima delle metriche aggiuntive è il First Contentful Paint (FCP), che registra il tempo in cui il browser visualizza il primo elemento significativo, per esempio un titolo, un paragrafo, un’immagine. Un buon risultato è inferiore a 1,8 secondi. 

L’ultima metrica è il Time to First Byte (TTFB), che corrisponde al tempo che intercorre tra la prima richiesta dell’utente e la risposta da parte del server, e dovrebbe essere sotto gli 800 millisecondi.

Dopo le analisi della velocità, PSI ci offre il Treemap: un diagramma che rappresenta le risorse impiegate dai diversi script JavaScript caricati da una pagina e serve a individuare gli script inutili e le cause di eventuali rallentamenti.

Più giù, nelle sezioni Diagnostica e Insights, trovi una serie di raccomandazioni specifiche per il sito analizzato, in molti casi accompagnate dai potenziali risparmi di tempo o dati inviati.

PageSpeed Insights ci dà anche diversi suggerimenti per migliorare l’esperienza utente su WordPress lavorando su un aumento della velocità del sito web. In base alle criticità che rileva per esempio, potrebbe consigliarti di:

• attivare una cache;
• rimandare o incorporare richieste che bloccano il rendering iniziale della pagina;
• ridurre e minificare il codice JS;
• evitare attività lunghe nel processo principale del browser;
• evitare di concatenare le richieste fondamentali.

Tutti i risultati positivi del tuo sito sono invece visibili nella sezione Controlli superati.

Puoi scoprire un’alternativa a PSI nella nostra guida dedicata a GTmetrix.

WebPageTest

Come abbiamo visto nella guida dedicata, anche WebPageTest analizza la velocità dei siti ma in modo più dettagliato rispetto a PSI, per esempio permette di simulare diversi browser e località per ottenere un quadro il più possibile completo.

WebPageTest potrebbe non essere lo strumento migliore per fare una prima valutazione delle prestazioni e dell’esperienza utente di WordPress, perché i suoi report sono tanti e complessi. Per chi è abituato a questo tipo di metriche e grafici invece è una fonte di informazioni molto preziosa. Può esserti molto utile, per esempio, se hai già messo in pratica i suggerimenti di PSI e il tuo sito non è ancora veloce come vorresti.

Un punto di forza di WebPageTest è la Vista Filmstrip. Questa schermata raccoglie diversi grafici che rappresentano i momenti chiave del caricamento della pagina web e così permette di individuare le risorse che la stanno rallentando, comprese quelle esterne (come font o domini).

WebPageTest dedica una schermata all’usabilità e ci dà informazioni su:

• layout shift (spostamento del layout durante il caricamento);
• eventuali rallentamenti del processo principale del browser; 
• configurazione del Meta Viewport – tag HTML che controlla la visualizzazione del layout sui dispositivi mobili;
• dimensioni finali del DOM.

PSI e WebPageTest sono comodi soprattutto per ottenere informazioni sul sito in generale, perché per vedere i dati dei singoli URL bisognerebbe inserirli e analizzarli uno per uno. Vediamo quindi uno strumento che li può completare in quanto a partire dal dominio è capace di indicarci subito tutti i contenuti problematici dal punto di vista della UX.

Google Search Console

La Search Console ha il vantaggio di segnalare i problemi di usabilità quando vengono rilevati e di indicare anche le pagine in cui nascono. 

Contiene una sezione dedicata alla UX – Esperienza –, che ospita le schermate Core Web Vitals e HTTPS. È sparita invece la parte sull’usabilità da mobile, probabilmente perché questo tipo di dispositivo è ormai il riferimento principale di Google.

Core Web Vitals mostra due grafici – dispositivo mobile e computer – con l’andamento delle metriche negli ultimi 90 giorni. Qui indica anche il numero di URL che offrono un’esperienza utente:

• scadente 
• che richiede miglioramenti
• oppure buona.

Se fai clic sul pulsante Apri il rapporto, puoi visualizzare più dettagli, come il problema da risolvere.

Con un clic su una qualsiasi riga della tabella in basso vedrai in fondo alla pagina l’URL che presenta i problemi. E dopo averli risolti potrai avviare la convalida della correzione, segnalandolo a Google attraverso il pulsante apposito.

Il report HTTPS funziona esattamente come il report Core Web Vitals. In questo caso visualizzerai le pagine su cui funziona l’HTTPS (in verde) e quelle in cui non funziona (in rosso).

Google Analytics

Se non l’hai ancora fatto, puoi collegare Analytics a WordPress seguendo la nostra guida, manualmente oppure attraverso un plugin come MonsterInsights.

Se scegli il plugin potrai monitorare i risultati direttamente da WordPress, altrimenti dovrai accedere alla piattaforma di Analytics.

Cosa ci dice Google Analytics 4 riguardo all’esperienza utente su WordPress?

Analytics non contiene una sezione specifica sulla UX ma offre dati sul comportamento, sul coinvolgimento e sul percorso dell’utente che possono aiutarti ad avere un quadro più completo su come sta funzionando il sito per i tuoi visitatori.

Come abbiamo visto in dettaglio nella guida ad Analytics per principianti, GA4 ci mostra una serie di report standard, personalizzabili, e ci permette anche di creare report personalizzati da zero.

Dai report di Coinvolgimento puoi dedurre quanto i tuoi visitatori sono interessati ai contenuti del sito ed eseguono le azioni che desideri. Per l’esattezza Google considera sessioni con coinvolgimento quelle che rispettano una di queste condizioni:

• durano più di 10 secondi;
• contengono un evento chiave, cioè una conversione;
• portano l’utente a visualizzare almeno due pagine diverse.

Il report Panoramica di coinvolgimento ti informa sulla Durata media del coinvolgimento per utente attivo, cioè il tempo medio trascorso dai visitatori con la pagina in primo piano sul dispositivo.

Nel report Eventi puoi verificare quante volte si verificano le interazioni significative che hai configurato come eventi – per esempio scroll o clic – ed eventi chiave. 

Grazie al report Pagine e schermate hai la possibilità di scoprire come stanno andando i singoli contenuti, quali ricevono più visualizzazioni e quali hanno tempo di permanenza più lungo.

Con i report personalizzati puoi combinare le metriche per monitorare ulteriori aspetti come, ad esempio, il numero di pagine visitate o di eventi per sessione.

Inoltre puoi accedere a ulteriori metriche relative all’esperienza utente in WordPress, come la Frequenza di rimbalzo – che oggi indica la percentuale di sessioni senza coinvolgimento –, il numero di Sessioni con coinvolgimento e il Tasso di coinvolgimento, cioè la percentuale di sessioni in cui gli utenti interagiscono attivamente con il sito web o l’app.

Analytics contiene anche la funzionalità Esplorazione del percorso, che ti permette di esplorare i percorsi dei visitatori sotto forma di grafico ad albero. In questo modo puoi scoprire quali pagine aprono i nuovi utenti dopo la home o quali effetti ha un evento sulle azioni degli utenti; o anche individuare comportamenti che potrebbero indicare che un utente non sa come proseguire. 

In GA4 ti basta attivare la misurazione avanzata per riuscire a tracciare:

• Visualizzazioni di pagina – misurate di default;
• Scorrimenti – ogni volta che un utente visualizza almeno il 90% di una pagina;
• Clic in uscita – cioè su link che portano fuori dal dominio;
• Ricerca sul sito, attraverso la barra apposita;
• Interazioni con i moduli inseriti su WordPress con plugin per i form;
• Coinvolgimento per video incorporati provenienti da YouTube;
• Download di file.

Aumentare la velocità del sito WordPress

Se hai un sito lento, non puoi offrire una buona esperienza utente. Per fortuna puoi risolvere applicando le buone pratiche che abbiamo approfondito nella guida per velocizzare WordPress. In più hai sempre la possibilità di dare una spinta alle prestazioni del sito cambiando hosting.

Una delle primissime cose da fare è ottimizzare le immagini usate in WordPress ridimensionandole, comprimendole e scegliendo formati adeguati come WebP o AVIF.

Oltre alle immagini, anche i video incidono tantissimo sui tempi di caricamento delle pagine web. Il modo più efficace di gestirli è incorporarli attraverso gli iframe di piattaforme esterne come YouTube, Vimeo ecc.

Un altro accorgimento di base per mantenere alta la velocità di un sito web consiste nell’attivare la cache – un sistema che memorizza i contenuti nel browser in modo da non doverli ricaricare ogni volta – per esempio installando un plugin come LSCache o WP Rocket.

Solo se i tuoi utenti si connettono da diversi paesi del mondo, per migliorare l’esperienza utente sul tuo sito WordPress sarà utile anche usare una CDN, che permette di inviare i dati da server vicini al computer di destinazione.

In tutti i casi è utile ottimizzare il codice CSS, JavaScript, HTML: si possono eliminare le parti inutili o duplicate; lo si può ‘minificare’ riducendo i caratteri superflui e fare dei merge unendo i file simili. In questo modo si riduce sia l’entità che il numero delle richieste al server. 

Per aumentare la velocità delle pagine dovresti anche assicurarti che sia attivo il lazy loading in WordPress, magari implementando uno dei sistemi di cui abbiamo parlato nella guida dedicata, e far sì che tutti i media della pagina tranne il primo vengano caricati solo quando ricadono nell’area visibile all’utente.

Cerca di ridurre i plugin a quelli davvero necessari perché ogni programma installato aumenta i tempi di caricamento del sito (e aggiunge rischi per la sicurezza e probabilità di conflitti tra software). Usando la copia di staging del tuo sito potresti verificare almeno un paio di volte all’anno quali si possono rimuovere senza impatti significativi su funzionalità e prestazioni.

Con strumenti come GTmetrix puoi individuare le richieste inutili ed eliminarle. Infatti può capitare che degli elementi, per esempio i moduli, vengano caricati anche su pagine in cui non sono presenti.

Se hai già applicato i suggerimenti visti finora senza ottenere prestazioni del sito ottimali, potrebbe essere arrivato il momento di passare a un hosting WordPress davvero efficiente.

Semplificare il design 

Per garantire una buona esperienza utente su WordPress, il design deve essere semplice e chiaro.

Il layout dovrebbe contenere solo gli elementi necessari, senza funzionalità superflue che di fatto non vengono usate da nessuno ma distraggono e rallentano il caricamento, come widget meteo o orologio, calendari, contatori delle visite o pulsanti social a inizio pagina.

Per lo stesso motivo bisognerebbe valutare bene anche prima di inserire nell’header banner, video e caroselli che la maggior parte degli utenti non guarderà. 

Un discorso a parte meritano i popup: per quanto utili (pensa ad esempio a quelli generati dai plugin per la newsletter) vanno usati con parsimonia perché interrompono la navigazione e rischiano di infastidire i visitatori.

In generale è meglio evitare elementi puramente decorativi. Si può conferire più personalità all’aspetto del sito anche solo scegliendo bene le immagini e le grafiche, che cambiano l’impatto visivo della pagina anche a parità di layout.

Per esempio il sito di Luisa Carrada mi aveva colpito per l’aspetto non banale ma in fondo il layout è abbastanza semplice e a fare la differenza è l’uso dei colori nelle immagini e nei font.

Un altro aspetto da non sottovalutare per ottenere una buona esperienza utente su WordPress è la coerenza visiva. Mantenere gli stessi colori e font, spaziature e stili per tutto il sito è rassicurante per il cervello e gli permette di concentrarsi su quel che è importante per te: che siano contenuti, call to action o prodotti.

Per rinforzare quest’effetto meglio adottare il minimalismo anche riguardo ai tipi di carattere scegliendone 2-3 al massimo.

Ovviamente lo stile dovrebbe essere in linea col brand e rispettare la sua identità visiva.

Curare l’estetica

Il tuo sito WordPress dovrebbe essere anche bello da vedere. È vero che la bellezza è in parte soggettiva, ma la coerenza dello stile, l’ordine e l’armonia contribuiscono a rendere un sito esteticamente piacevole per chiunque. In più comunicano professionalità e affidabilità.

Per facilitare coerenza e armonia visiva anche nei siti non costruiti da un web designer, tanti temi popolari offrono delle palette di colori già pronte insieme alla possibilità di personalizzarle. Queste per esempio sono quelle di Astra:

Uno strumento utilissimo e gratuito per creare un insieme armonico di colori per il tuo sito WordPress è Color palettes di Canva, che ne contiene centinaia già pronte. 

Se vuoi farti ispirare da una foto, prova la funzionalità per generare la palette a partire da un’immagine.

Facilitare la navigazione

Ci sono diversi modi per facilitare la navigazione al fine di migliorare l’esperienza utente su WordPress.

Il più ovvio consiste nell’implementare sul sito web un menù di navigazione, come quello che troviamo nella testata di quasi tutti i siti.

A seconda della complessità del tuo sito, puoi anche integrare il menù superiore con un ulteriore menù nella barra laterale di WordPress oppure con i menù laterali tipici degli ecommerce, di solito posizionati a sinistra.

WordPress permette anche di creare menù complessi che contengono sottomenù a discesa.

Come abbiamo spiegato meglio nella guida dedicata, si possono anche costruire veri e propri megamenù per WordPress.

Per una navigazione fluida possiamo anche dedicare un po’ di tempo a rendere più efficace la ricerca interna di WordPress.

Un altro modo facile per migliorare l’esperienza utente è aggiungere i breadcrumb su WordPress: ulteriori percorsi di navigazione comodi per muoversi velocemente sul sito e sapere sempre dove ci si trova.

Migliorare l’usabilità dei contenuti

Sul web l’usabilità dei contenuti – cioè la facilità con cui possono essere fruiti dalle persone – dipende da diversi fattori, che hanno a che fare con la leggibilità del testo, la logica della struttura, la facilità di navigazione.

Per migliorare l’esperienza utente in WordPress puoi applicare una serie di accorgimenti che, per fortuna, stanno diventando prassi, ma vale sempre la pena ricordare.

I blocchi di testo troppo lunghi sono scoraggianti per chi legge sul web, quindi è preferibile andare spesso a capo e lasciare tanto spazio bianco anche ai lati del testo e tra le sezioni del layout. 

Inoltre per affaticare meno la vista, il testo deve essere non giustificato e allineato a sinistra; mentre le righe non devono superare i 70-80 caratteri di lunghezza. 

Il testo dovrebbe essere ‘scansionabile’ in modo che si riesca a farsene un’idea velocemente. La maggior parte del lavoro in questo senso lo fanno i grassetti, gli eventuali elenchi e tabelle e i titoli, che devono essere ben riconoscibili e strutturati in modo logico.

Per lo stesso motivo anche offrire un indice dei contenuti è altrettanto importante. E sarebbe molto comodo per l’utente anche avere dei tasti per tornare all’indice con un solo clic. 

Immagini e grafici possono essere utili per spiegare concetti complessi e spezzare il testo, mentre video e podcast rendono più piacevole l’esperienza di chi preferisce questi formati al testo scritto.

Quando inserisci dei moduli assicurati di chiedere solo informazioni davvero necessarie in modo da mantenerli brevi, perché la maggior parte delle persone non ama compilarli. 

I pulsanti devono essere molto evidenti, con testi sintetici che non lasciano spazio a interpretazioni, come in questo esempio dal nostro sito.

Rendere i contenuti più leggibili

Tra i vari aspetti di un contenuto user-friendly c’è la leggibilità, necessaria per un’esperienza utente su WordPress positiva e presupposto per un un sito davvero accessibile.

Per esempio un buon contrasto tra il testo e lo sfondo migliora la leggibilità su qualsiasi dispositivo per chiunque, ma può fare una differenza sostanziale per le persone con disabilità visive. Il colore di sfondo in particolare dovrebbe essere neutro, per non affaticare la vista.

Anche la scelta del carattere è importante. In genere i font sans-serif (senza grazie) sono più leggibili su schermo di quelli graziati (serif), soprattutto su dispositivi di piccole dimensioni. Tra i caratteri sans-serif più noti ci sono:

• Arial
• Roboto
• Lato
• Helvetica
• Open Sans
• Montserrat.

Migliorare l’accessibilità per tutti gli utenti

Vediamo come fare un passo avanti che ci porti da un sito usabile a un sito accessibile, cioè utilizzabile anche da persone con disabilità temporanee o permanenti e in caso di riduzione delle abilità dovuta all’invecchiamento. 

Per iniziare è buona norma aggiungere alle immagini un testo alternativo descrittivo, che possa essere ascoltato dalle persone ipovedenti attraverso un software apposito capace di leggere dallo schermo (screen reader) – oltre che dai robot dei motori di ricerca a fini SEO.

Dopodiché puoi fare riferimento alle WCAG (Web Content Accessibility Guidelines), linee guida per l’accessibilità del contenuto Web. Lo scopo delle WCAG è aiutare i web designer a creare siti che il maggior numero di persone possa percepire e capire, e con cui sia in grado di interagire, a prescindere dal dispositivo e dal browser. 

Le WCAG 2.1 richiedono che tutto il testo sia leggibile dagli screen reader e suggeriscono metodi per rendere accessibili e questi programmi anche gli elementi non testuali. 

Le linee guida per l’accessibilità consigliano valori minimi per la spaziatura del testo:

• interlinea di almeno 1,5 volte la dimensione del carattere;
• spaziatura tra paragrafi di almeno 2 volte la dimensione del carattere;
• spaziatura tra lettere di almeno 0,12 volte la dimensione del carattere;
• spaziatura tra parole di almeno 0,16 volte la dimensione del carattere.

Prescrivono ad esempio il rapporto minimo del contrasto cromatico tra il testo e lo sfondo:

• 4.5:1 per i testi normali;
• 3:1 per testi superiori a 18 pt o in grassetto.

Esistono strumenti online per misurare questo rapporto a partire dai colori html del tuo sito. 

Abbiamo parlato approfonditamente di tutte le raccomandazioni WCAG e di come usarle nella guida all’accessibilità dei siti web.

Eseguire regolarmente test di accessibilità

Esistono software per eseguire test di accessibilità e verificare se il sito soddisfa le linee guida: una lista è disponibile sul sito della WAI (WEB Accessibility Initiative), l’organizzazione responsabile delle WCAG. 

Tra questi ci sono anche Accessibilitychecker, solo online, e Wave, che è disponibile anche come estensione del browser e quindi può essere usato anche per testare siti in locale.

Tieni conto però che gli strumenti automatici possono dare risultati orientativi ma non riescono a essere del tutto affidabili per questo tipo di valutazioni.

Ottimizzare il sito per i dispositivi mobili

Quando ti occupi dell’esperienza utente su WordPress ricordati che la UX su smartphone ha (almeno) la stessa importanza di quella dal computer, per due motivi: più della metà degli utenti naviga dal telefono; inoltre è la versione mobile del sito a essere scansionata da Google. Quindi dalla versione mobile dipende il posizionamento SEO, secondo il principio “mobile first”.

La prima cosa da fare per assicurarti che il tuo sito WordPress sia ottimizzato per i dispositivi mobili è scegliere un tema responsive, cosa non difficile perché oggi tutti i temi WordPress presenti nella directory ufficiale lo sono: è un requisito per l’accesso. Non tutti i temi responsive però sono ottimizzati allo stesso modo.

Se non hai ancora scelto quello per il tuo sito, potrebbe esserti utile nostra guida ai migliori temi WordPress.

Come forse avrai notato, GeneratePress, Astra, OceanWP e Neve sono famosi per essere veloci, flessibili e adatti a ogni dispositivo.

In ogni caso, su qualunque tema, puoi simulare la visualizzazione da tablet e da smartphone quando costruisci lo stile dalla sezione Personalizza. Ci sono dei controlli appositi in fondo al pannello a sinistra, grazie ai quali potrai avere un’impressione più realistica dell’esperienza sui diversi dispositivi mentre crei il design del sito. 

Prima di renderlo definitivo però è consigliabile testarlo navigando sul sito con un dispositivo reale. 

Che requisiti deve avere un’interfaccia ottimizzata per mobile?

Le pagine devono essere ancora più veloci perché gli utenti mobile hanno più fretta degli utenti desktop e i loro dispositivi mobili sono in genere meno efficienti.

Le funzionalità presenti su computer devono comparire anche su mobile, ma spesso è necessario semplificarle perché lo spazio è minore. Questo è particolarmente vero per i menù.

Il testo deve essere leggibile anche senza essere ingrandito con lo zoom.

I pulsanti devono essere dimensionati in modo che sia possibile selezionarli con le dita senza toccare per sbaglio quelli accanto.

Ovunque sul sito, tra un link e l’altro ci deve essere abbastanza spazio in modo da non rischiare di far clic sull’elemento sbagliato.

Infine ricorda che se rimuovi degli elementi dalla versione mobile Google non li vedrà anche se sono presenti su desktop.

Individuare problemi di design con il test di regressione visiva

Il test di regressione visiva (VRT) serve ai web designer per verificare che le modifiche al codice non abbiano alterato l’aspetto visivo di un sito o di un’app. Questa tecnica può esserti utile non solo in fase di sviluppo ma anche per verificare che gli aggiornamenti di plugin o temi non abbiano alterato il design. Per renderlo meno probabile comunque accertati di personalizzare sempre il tema child.

Il test inizia con la cattura di screenshot delle pagine o componenti del sito per usarle come riferimento. Dopo una modifica o un aggiornamento si salvano di nuovo le stesse schermate. Un software confronta pixel per pixel le due versioni ed evidenzia le differenze con delle campiture colorate.

Ovviamente il processo può essere completamente automatizzato. In particolare su WordPress abbiamo a disposizione anche dei plugin dedicati al test di regressione visiva, come VRTs, che gestiscono i controlli e inviano notifiche quando rilevano qualche anomalia.

Adottare misure per la sicurezza

Non ha molto senso occuparsi dell’esperienza utente se il sito non è sicuro. Per risolvere trovi tutti gli accorgimenti da mettere in atto nella nostra guida su come migliorare la sicurezza di WordPress.

Tra questi, se non l’hai ancora fatto, puoi applicare subito l’autenticazione a due fattori e i diversi metodi per limitare i tentativi d’accesso a WordPress e rendere il più possibile improbabile che il sito WordPress finisca sotto attacco hacker. 

Spesso chi amministra i siti sceglie di proteggere il sito installando un plugin per la sicurezza di WordPress – come Wordfence, Sucuri Security, iThemes –, che di solito comprende un firewall per limitare il traffico non desiderato e potenzialmente dannoso, più altre funzioni specifiche. 

In realtà alcune funzionalità di questi plugin, tra cui il firewall, possono essere applicate in modo più efficace lato server e alcuni fornitori di hosting come SupportHost che le includono nel servizio.

Inoltre con un piano gestito di come un VPS cloud hosting o un server dedicato, i nostri tecnici potranno ottimizzare il server sulla base delle tue esigenze.

Mantenere WordPress aggiornato

Assicurarsi di usare sempre le ultime versioni del core, dei plugin e del tema aiuta a garantire una buona esperienza utente su WordPress in modo diretto e indiretto.

Indirettamente il software aggiornato influisce sulla UX perché riduce le vulnerabilità di sicurezza ed evita situazioni che non solo renderebbero l’uso del sito poco gradevole, ma potrebbero anche mettere a rischio i dati degli utenti.

L’effetto diretto è quello di permettere ai visitatori di accedere sempre alla migliore versione disponibile delle funzionalità, in cui sono stati risolti bug e problemi di usabilità segnalati su quelle precedenti.

A/B test

Quando si lavora sull’esperienza utente non basta seguire le buone pratiche: in molti casi l’unico modo per accertarsi che una modifica contribuisca davvero al miglioramento della UX è testarla sul campo.

Ecco perché questo è uno degli ambiti in cui sono più utili gli A/B test, che consistono nel proporre due soluzioni diverse agli utenti e confrontare i risultati. Per ottenere dati comparabili bisogna concentrarsi su un solo aspetto: per esempio se vuoi testare il colore di un pulsante, dovrai proporre due versioni della stessa pagina che si differenzino solo per il colore del pulsante.

Puoi iniziare con l’applicare questo metodo alle tue pagine più importanti, dove i piccoli cambiamenti possono incidere in modo significativo sui risultati globali del tuo sito WordPress. Se stai muovendo i primi passi nel mondo della UX, la nostra guida agli A/B test ti sarà d’aiuto.  

Conclusioni 

In questa guida sull’esperienza utente in WordPress abbiamo visto come sia necessario migliorarla per avere un sito che converte ma anche per ottenere più traffico dai motori di ricerca, visto che le principali metriche di Google per la UX sono anche fattori di ranking.

Puoi partire da un audit UX con test manuali di usabilità e con strumenti online che misurano le prestazioni del sito oppure ti permettono di osservare da vicino il comportamento dei tuoi visitatori, come Hotjar e PageSpeed Insights, che ti danno anche dei suggerimenti personalizzati su come risolvere eventuali problemi di esperienza utente sul tuo sito WordPress.

Dovresti anche assicurarti di applicare tutte le buone pratiche di cui abbiamo parlato, che vanno dal migliorare la velocità e il design per favorire la navigazione, al mantenere WordPress aggiornato e sicuro.

E tu hai già applicato questi suggerimenti per migliorare la UX sul tuo sito? Hai ottenuto i risultati che ti aspettavi? Se ti va, raccontaci nei commenti.