Come ottimizzare l’esperienza utente da mobile: 7 consigli per il tuo sito web

| Sito web, UX Design

Come ottimizzare l'esperienza utente da mobile: 7 consigli per il tuo sito web - Mirko Ciesco

Migliorare l’user experience di un sito web da mobile è indispensabile. Il motivo? La fruizione si muove in questa direzione, nella maggior parte dei progetti la fetta di traffico maggiore arriva dagli smartphone.

A questo ci aggiungi una serie di segnali importanti – tipo Mobile First Index di Google – e hai la sintesi: il tuo sito web deve essere ottimizzato per il traffico che arriva da telefonini e tablet di varie dimensioni.

Questo non vuol dire solo avere un sito web responsive: ormai tutti i template rispettano questa regola. L’obiettivo è un altro: Migliorare l’user experience, esperienza di chi usa le tue pagine web. Qualche idea?

Crea una navigazione ordinata

Il primo consiglio che bisogna dare a chi ha intenzione di ottimizzare il proprio sito web intorno all’user experience: fare in modo che il portale presenti le risorse che hai confezionato in forma chiara e ordinata.

Questo significa, come punto di partenza, studiare una struttura in grado di presentare i contenuti utili agli utenti. Subito dopo arriva la navigazione: come presenti al pubblico le pagine più importanti? Gli errori:

  • Menu inesistenti e difficili da trovare.
  • Navigazione inutilmente abbondante.
  • Mega-menu degni di Amazon o eBay.
  • Etichette di navigazione criptiche.

Qual è la parola d’ordine? Semplicità, condita da poche regole di base che si possono riscontrare anche nella guida SEO ufficiale di Google. Ecco consigli preziosi da seguire in qualsiasi occasione e per i tuoi progetti:

Semplifica il più possibile per gli utenti l’accesso ai contenuti sul tuo sito, dai più generici ai più specifici. Aggiungi quando appropriato pagine di navigazione e organizzale in modo efficace nella struttura dei link interni. Assicurati che tutte le pagine del sito siano raggiungibili tramite link e che non richiedano una funzionalità di ricerca interna per essere trovate”.

In primo luogo usa un microcopy semplice e diretto per le etichette di navigazione, crea un menu principale capace di eliminare il superfluo, fa’ in modo che ogni pagina sia raggiungibile. Ma non per forza al primo click.

Cura sempre l’above the fold

Un principio valido in particolar modo se si valuta l’usabilità e l’esperienza utente da mobile. Quando progetti una pagina web devi fare in modo che tutto sia chiaro prima ancora di effettuare uno scrolling.

Hai pochi secondi – massimo 10 per Jakob Nielsen – per far capire al lettore quali sono i punti di forza della tua pagina. Valutando sempre la fusione virtuosa tra copy e web design. Guarda l’immagine in basso:

usabilità user experience mobile

Fonte: designXP

Come puoi ben vedere non devi solo usare la prima parte della pagina per inserire headline con main promise, tagline con punti di forza e call to action per invitare l’utente ad agire.

Devi anche assicurarti che gli elementi che richiedono l’azione del pubblico si sposino alla perfezione con il metodo d’uso della pagina attraverso un determinato dispositivo.

Mai come ora bisogna appoggiare Marshall McLuhan: il medium è il messaggio.

Per approfondire: Above the fold: come gestire la zona “sopra la piega”

Aiuta le persone a orientarsi

Se lo fai, oltre migliorare l’user experience dai buoni segnali per la SEO. Quali sono i consigli in questo caso? Usa i breadcrumb per far capire sempre a chi naviga dove si trova dal punto di vista gerarchico, se necessario crea una sitemap HTML per dare un’idea di base dell’architettura. Inoltre ci sono una serie di suggerimenti:

  • Metti sempre link al logo.
  • Prevedi un campo di ricerca interno.
  • Usa link interni con attenzione.
  • Personalizza la tua pagina 404.

Già, un not found può sempre capitare però tu devi essere in grado di dare alla pagina errore una valenza pratica. Migliorare l’user experience degli utenti vuol dire anche fare in modo che dalla pagina 404 sia possibile tornare in home page e trovare articoli fondamentali, prodotti più venduti o pagine archivio.

Correggi tutti gli errori possibili

Chiaro, una pagina 404 personalizzata e di qualità può aiutare non poco a trasformare un imprevisto in risorsa. Ma è sempre cosa buona e giusta correggere ciò che può portare frustrazione e insoddisfazione all’utente. Cosa controllare quando fai il tuo check per migliorare e ottimizzare l’esperienza da mobile?

  • Elimina i broken link interni e in uscita.
  • Assicurati che gli header siano coerenti.
  • Verifica integrità delle immagini.
  • Correggi i 404 significativi.
  • Usa lo spazio giusto tra gli elementi.

Ricorda che non tutti gli errori 404 sono un problema, in alcuni casi sono voluti e non rispecchiano problemi. Ad esempio quando cancelli pagine vecchie e che non portano traffico/link. Usa sempre la Search Console o Screaming Frog per verificare not found improvvisi e non voluti. Lo stesso vale per i broken link, i collegamenti interrotti.

In questo caso io uso Broken Link Checker, un plugin WordPress che mi avvisa quando c’è un malfunzionamento (consiglio di attivarlo 1 volta al mese e poi disattivarlo per evitare di consumare troppe risorse del server e rallentare il sito).

Per assicurarmi che che non ci siano errori da smartphone sfrutto il Mobile Test di Google e per l’accessibilità (tipo gerarchie degli h2 e h3 saltate o tag alt mancati) uso Wave Web Tool.

Crea un sito web super veloce

La velocità è un elemento chiave per migliorare user experience, caricamento e posizionamento su Google. I benefici che possono arrivare dal miglioramento dei tempi di caricamento sono tanti.

migliorare user experience del sito con google pagespeed insights

Anche perché la velocità è un fattore SEO: Mountain View premia i contenuti di qualità e questa etichetta si afferma anche grazie alla facilità con cui una persona può aprire e leggere una pagina web.

Monitora con cura la velocità del tuo sito e investi il giusto per migliorare le sue performance. Iniziando da un hosting performante e continuando con una riduzione perso dei file immagini, il miglioramento della cache, l’ottimizzazione dei font, la compressione Gzip e ciò che si può fare per presentare pagine veloci.

Da leggere: cosa fare quando hai un sito WordPress lento

Pubblica contenuti di qualità

Questo passaggio ha un valore specifico e riguarda il concetto stesso di web writing. Quando pubblichiamo un articolo per il blog o una landing page ci preoccupiamo, ovviamente, di scrivere ottimi testi. Per chi? Per l’utente o una fantomatica necessità di avere long form conte da sfruttare nel posizionamento SEO?

Ritroviamo spesso questa teoria: i contenuti lunghi aiutano a posizionarsi. Ma è sempre così? No, per niente: tutto dipende dall’intento di ricerca. Cosa vuole l’utente? Fatti questa domanda, analizza la serp, scopri cosa viene premiato e lavora di conseguenza. Puntando anche su uno studio a monte sulle buyer persona.

Vale a dire gli idealtipi in grado di sintetizzare il tuo target al meglio. Non devi creare contenuti a caso, ma pensando alle necessità delle persone che vuoi raggiungere. E trasformare in utenti convenienti.

Da leggere: migliorare il posizionamento del blog

Migliora la leggibilità del testo

La readability del contenuto deve essere curata nei minimi dettagli quando si lavora con l’ottimizzazione per il mobile. In primo luogo devi valutare la lunghezza dei paragrafi, ma anche la grandezza del font (minimo 16 pixel) e la vicinanza del testo rispetto ad altri elementi della pagina. Ci vuole spazio e grandezza, ma anche equilibrio:

  • Usa un carattere leggibile (meglio sans serif).
  • Scegli una grandezza comoda per il body.
  • Organizza gli header in modo gerarchico.
  • Cura spazi interlinea, non eccessivo o minimo.
  • Sfrutta liste puntate e grassetto, quanto basta.
  • Usa un allineamento del testo a bandiera.
  • Aggiungi link con anchor text utili all’utente.
  • Togli quello che non serve nel copy ed evita muri di testo.

Un passaggio a parte merita il tema del contrasto: assicurati che il testo, oltre a essere abbastanza grande, si noti sullo sfondo grazie a un buon contrasto. Per controllare prima di effettuare le modifiche puoi valutare la sintesi font/sfondo con il tool contrast-ratio.com o attraverso il report di accessibilità disponibile in Lighthouse di Chrome. Ma è solo sul testo che si deve concentrare l’attenzione?

Anche l’uso di immagini e video deve essere ponderato. Usa i contenuti multimediali al posto del testo, sfruttali per migliorare l’esperienza dell’utente: non tutto può e deve essere comunicato con il testo. D’altro canto anche in questo caso devi seguire la regola d’oro, vale a dire l’economia: togli quello che non serve.

Come ottimizzare tutto questo?

Non procedendo a caso. Ecco l’aspetto che devi considerare: per ottenere buoni risultati nel migliorare l’user experience di un sito – e della singola pagina web – devi puntare a un approccio data driven.

Quindi misurando il comportamento degli utenti con tool come CrazyEgg e Hotjar: togli quello che non è necessario alla buona comunicazione, metti in evidenza ciò che serve, modifica con cognizione di causa e non per intuizione o semplice fortuna. Ovviamente il tema deve essere gestito dalla giusta competenza.

Mirko Ciesco

Mirko Ciesco

Web Performer

Sviluppatore web esperto in web performance. Realizza siti web, ottimizza la SEO tecnica e migliora l’usabilità dei siti internet attraverso la web analytics. Collabora con Studio Samo e tiene corsi di web design in Novel Academy a Torino.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *