Come migliorare l'UX mobile: 11 strategie efficaci

Pubblicato: 2022-03-18

Perché devi concentrarti sugli utenti mobili

Hai un sito web mobile friendly, vero? Lo tieni aggiornato con contenuti pertinenti e segui le ultime linee guida SEO? Certo che lo fai! E scommetto che offre un'esperienza utente eccezionale sul tuo desktop o laptop.

Ma converte su dispositivi mobili? Poiché l'utilizzo di Internet mobile è esploso nel corso degli anni, la tua esperienza utente mobile (o Mobile UX) dovrebbe ricevere la stessa attenzione dell'esperienza utente del tuo sito Web desktop.

Nel 2022, fino al 70% del traffico web proviene da dispositivi mobili — TECHJURY

Sai come migliorare l'UX mobile? Sfortunatamente, la maggior parte delle esperienze mobili soffre di un'esperienza utente scadente per un semplice motivo: i loro creatori non sono riusciti a osservare le migliori pratiche, gli standard e le convenzioni di progettazione dell'esperienza utente mobile.

Poiché Google valuta sempre più il tuo sito in base alla tua versione mobile, il miglioramento della tua esperienza utente mobile diventa ancora più cruciale. In questo post, vorrei condividere 11 strategie pratiche per migliorare l'esperienza utente (UX) del tuo sito web mobile.

Sebbene tutte le cose menzionate in questo post si applichino anche ai tablet, avevo in mente gli smartphone quando ho scritto questo post. Ma, nel 2022, non devi solo tenere a mente gli smartphone poiché molti altri dispositivi possono consumare i tuoi contenuti. Alcuni di voi potrebbero persino leggere questo post sul proprio smartwatch.

Come migliorare l'esperienza utente mobile

1. Utilizzare una progettazione basata su attività

Domanda: Qual è il motivo principale per cui gli utenti visitano il tuo sito web?

Progetta il tuo sito web mobile e la sua struttura pensando all'utente, senza dimenticare il SEO mobile. Il tuo visitatore usa il suo telefono cellulare. Forse stanno andando verso qualsiasi cosa e hanno bisogno di controllare qualcosa sul tuo sito web. Cosa potrebbe essere? Pensa per un momento alle cose che i visitatori fanno sul tuo sito web (controlla Google Analytics, usa il buon senso riguardo alla tua attività o conduci test adeguati). Quindi, decidi le attività principali per il tuo sito Web mobile.

Le attività principali sono il piccolo insieme di attività (di solito meno di dieci, spesso meno di cinque) più importanti per i tuoi visitatori. Queste sono le attività essenziali che gli utenti si aspettano di eseguire sul tuo sito. Ottimizza il tuo sito mobile in modo che queste attività siano accessibili con la massima facilità.

Lo scopo principale del tuo sito Web è aiutare i visitatori a fare le cose. Se qualcuno trova il tuo sito web e inizia a esplorarlo, assicurati che possa trovare e completare facilmente ciò che vuole fare. Probabilmente ci sono un sacco di app sul loro telefono cellulare che sono abituati a utilizzare. Essere su un dispositivo mobile potrebbe rendere più difficile per l'utente concentrarsi. Le distrazioni sono ovunque, non solo al telefono. Progetta la tua UX mobile per assicurarti che facciano le cose prima di passare ad altre app.

2. Mantieni la semplicità

Potresti pensare che il tuo sito desktop sia fantastico con immagini di eroi e testo enorme. Ma sul tuo sito web mobile, gli utenti percepiranno l'effetto in modo diverso. Ci sarà meno concentrazione. Il tuo sito web non deve essere solo in bianco e nero, ma un semplice sfondo bianco, lettere nere e uno o forse due colori di supporto sono sufficienti per una migliore UX mobile.

Assicurati che il tuo sito mobile e il tuo sito desktop offrano la stessa esperienza utente. La coerenza vale per il contenuto e dovrebbe valere anche per il design. Inoltre, oggi, quando valuti il ​​tuo sito, dovresti sempre guardarlo da una prospettiva mobile-first. Quindi, se dovessi mai avviare un progetto di riprogettazione per il tuo sito, assicurati che sia mobile first.

Attenuare le cose vale anche per le tue animazioni e altre micro-interazioni. Ogni bit non essenziale di JavaScript che aggiungi al tuo sito rende più difficile il caricamento e l'esecuzione. Inoltre, le animazioni non hanno sempre senso su un sito mobile. Quindi mantieni il tuo sito snello e cattivo!

3. Ottimizza per la velocità

Mantenere il tuo sito mobile il più semplice possibile ti aiuterà anche a migliorare la velocità di caricamento della pagina sui dispositivi mobili. La velocità della pagina contribuisce in modo significativo all'esperienza utente mobile. Ci sono molti strumenti per controllare la velocità del sito. Spesso, ci sono diverse cose che puoi fare per ottimizzare la velocità della pagina.

Anche la velocità del sito è un argomento caldo in Google. Nel 2021 il motore di ricerca ha annunciato una nuova serie di metriche denominata Core Web Vitals. Queste metriche forniscono informazioni su Google per un nuovo fattore di ranking: Page Experience. Nel 2022, gli utenti giudicheranno i siti per dispositivi mobili in base all'esperienza che offrono agli utenti. E, hai indovinato, la velocità del sito è uno di quei fattori.

Una delle cose più semplici ed efficaci che puoi fare è ottimizzare le tue immagini per la SEO e l'esperienza utente. Ci sono diversi strumenti per aiutarti in questo. Mi piace Imagify, ma Smush e Short Pixel sono valide alternative.

In aggiunta a ciò, dovresti combinare e ridurre a icona i file CSS e JavaScript caricati. Minori sono le connessioni richieste al server, più veloce sarà il tuo sito Web e migliore sarà l'esperienza dell'utente mobile. Tuttavia, questo passaggio può danneggiare il tuo sito Web e dovresti farti aiutare da un web designer professionista.

Ovviamente, dovresti anche utilizzare l'hosting premium, poiché spesso si rivela una rapida vittoria per molti siti.

4. Utilizzare i pulsanti cliccabili

È così ovvio, ma è ancora motivo di preoccupazione. I visitatori navigano nei siti Web mobili utilizzando le dita e il pollice e i pulsanti non sempre offrono spazio sufficiente per colpirli rapidamente. Puoi trovarlo in Target Tap accessibili nella documentazione per sviluppatori di Google. E dobbiamo essere in grado di fare clic sugli elementi con quel pollice.

In quell'articolo di Google collegato sopra, puoi trovare i numeri per quel target di tocco:

Una dimensione minima consigliata per il touch target è di circa 48 pixel indipendenti dal dispositivo su un sito con un viewport mobile impostato correttamente. Ad esempio, mentre un'icona può avere solo una larghezza e un'altezza di 24 px, puoi utilizzare un riempimento aggiuntivo per portare la dimensione del target del tocco fino a 48 px. L'area di 48 × 48 pixel corrisponde a circa 9 mm, che è circa la dimensione dell'area del polpastrello di una persona.

Inoltre, gli esperti di usabilità di Nielsen hanno scoperto che i target touch sui dispositivi mobili dovrebbero avere una dimensione di rendering di almeno 1 cm x 1 cm per evitare errori e frustrazione. Relativi alle aree di pressione dei pulsanti sono elementi tattili che sono spesso troppo vicini tra loro, qualcosa che anche Nielsen ha descritto in quell'articolo di ricerca. Ad esempio, non è utile fare clic su un collegamento e finire da qualche altra parte perché il collegamento accanto è troppo vicino al collegamento desiderato.

5. Concentrati sulla zona del pollice mobile

Con l'aumento delle dimensioni dello schermo, il termine "zona del pollice mobile" è diventato improvvisamente cruciale per il vernacolo dei designer. La maggior parte delle persone tiene i propri dispositivi mobili da sola e usa il pollice per navigare nel sito.

Naturalmente, l'interfaccia utente mobile deve fornire la maggior parte degli elementi cliccabili e importanti pulsanti di navigazione a portata di mano. Pertanto, questa zona comodamente raggiungibile attorno al pollice dell'utente è considerata la zona del pollice mobile.

Ciò significa che devi ottimizzare l'esperienza del tuo sito mobile per la "zona del pollice", l'area dello schermo di un telefono a cui è possibile accedere facilmente con il pollice quando una persona tiene il telefono con una mano.

In sostanza, metti le interazioni primarie in primo piano e al centro (aree dello schermo facili da raggiungere) e quelle meno importanti ai bordi superiore e inferiore dello schermo. Tieni presente che all'aumentare delle dimensioni dello schermo, la zona del pollice diminuisce.

6. Aggiungi un menu semplice e un'opzione di ricerca

Uno degli elementi principali dell'UX mobile è la ricerca. Devi essere in grado di cercare in qualsiasi momento. Quindi un'opzione di ricerca dovrebbe essere sempre disponibile quando si legge una pagina quando si fa clic su un'altra. Il fatto è che, sebbene ci sforziamo di presentare il sito Web il più semplice possibile, ci saranno sempre elementi che non si adattano facilmente. Quindi, per tutti quei contenuti, sarebbe utile utilizzare un'opzione di ricerca mobile.

Se sei un agente immobiliare o vendi vestiti online, quell'opzione di ricerca potrebbe anche essere l'elemento essenziale sulla tua home page mobile. Quindi mostra quell'opzione di ricerca nell'area del contenuto in quel caso e rendila disponibile tramite la barra dei menu su altre pagine.

Un'altra cosa sulla UX mobile relativa alla ricerca: avere l'opzione è il primo passo. Assicurati che anche le tue pagine interne dei risultati di ricerca abbiano un aspetto fantastico. I risultati dovrebbero essere ordinati in base alla pertinenza, ad esempio desktop e mobile. Assicurati che i singoli risultati possano essere distinti, quindi migliora la separazione dei risultati.

7. Utilizzare separatori visivi

Questa mancanza di separazione non significa che dovresti usare tutti i tipi di divisori sul tuo sito web mobile. I divisori occupano spazio e ciò avrà invece un'influenza negativa sull'UX mobile.

Pensa a come modellare gli elementi in modo che appaiano tutti come sezioni separate, senza la necessità di un divisore. Usa bordi, spazi bianchi, intestazioni, ecc. Puoi fare molte cose per migliorare l'UX mobile senza aggiungere elementi di linea che occupano spazio. Naturalmente, non esiste una regola contro il loro utilizzo. Assicurati solo che si adattino e non distraggano gli utenti dall'esecuzione delle loro attività.

8. Usa i moduli brevi

Come sul tuo sito Web desktop, il tuo sito mobile potrebbe o dovrebbe mirare alla conversione. Ad esempio, i visitatori intendono acquistare prodotti o ottenere un preventivo per i tuoi servizi. Iscriversi alla newsletter o semplicemente compilare un modulo di contatto sono tutte azioni che richiedono l'input dell'utente. Su un telefono cellulare, i moduli multipagina rovinano l'UX mobile. Gli utenti potrebbero compilarli, ma richiede molto. Francamente, non mi piacciono molto i moduli multipagina su desktop o laptop.

Vuoi mantenere i moduli il più brevi possibile per un'esperienza utente mobile ottimale. Rimuovi tutte le cose che vuoi chiedere ma non ti servono:

  • Newsletter? Solo l'indirizzo e-mail (con un campo di immissione <input type="email">).
  • Citazione? Cognome e indirizzo e-mail.
  • Negozio? Consegna, fattura e indirizzo e-mail. Punti bonus per un'opzione per copiare l'indirizzo di consegna nell'indirizzo della fattura.

Assicurati di seguire le linee guida GDPR, però!

9. Limita le dimensioni dei caratteri

La tipografia può creare o distruggere un sito Web mobile. Non solo il tipo di carattere che scegli è importante, ma anche le dimensioni di quei caratteri. Sfortunatamente, non puoi semplicemente utilizzare tutte le dimensioni dei caratteri desktop sul tuo sito Web mobile. Ci sono due ragioni per questo:

  1. La dimensione dello schermo del cellulare. Non vuoi che il titolo riempia lo schermo; vuoi assicurarti che l'articolo inizi nella prima visualizzazione della pagina. Né vuoi che il carattere di base (come il carattere del paragrafo) sia troppo piccolo per essere letto senza dover pizzicare e ingrandire.
  2. Mobile UX soffre quando si utilizzano più di tre dimensioni dei caratteri. Le differenze di dimensioni saranno molto più visibili. Dovresti limitare il numero di dimensioni dei caratteri a due, forse tre.

I test ottimizzati per dispositivi mobili di Google controllano persino se utilizzi le dimensioni dei caratteri consigliate. Ovviamente, questo vale principalmente per il carattere del corpo, ma comunque.

10. Limita gli annunci e i pop-up

Molti siti utilizzano gli annunci per fare un po' di soldi, e va bene. Ma non dovresti spaventare l'utente con pop-up invadenti e un'abbondanza di annunci di terze parti. Non rispetti l'utente quando la prima cosa che gli fai provare è un modulo di iscrizione alla tua newsletter. Assicurati che i tuoi contenuti principali vengano caricati prima di introdurre i tuoi annunci e CTA.

Inoltre, mantieni gli annunci di buon gusto e attenuati. Stai cercando di costruire una connessione e formare una relazione con un utente, e questo non accade quando gli sbatti in faccia ACQUISTA LE MIE COSÌ ORA nel momento in cui arriva sul tuo sito mobile. La pubblicità eccessivamente aggressiva crea un'esperienza utente negativa.

11. Metti alla prova la tua UX mobile. Ripetere!

Quando pubblichi un sito web mobile per i tuoi visitatori, devi testare ogni modifica sul tuo sito desktop e sulla versione mobile del tuo sito. Questo è l'unico modo per assicurarti che il tuo sito web mobile sia sempre aggiornato. Quindi assicurati di testare il tuo sito per dispositivi mobili ancora e ancora.

I vantaggi del miglioramento dell'esperienza utente mobile

L'era mobile è alle porte e migliorare l'esperienza utente sui dispositivi mobili è importante quanto migliorarla per gli utenti desktop. Ovviamente, richiede molto lavoro, ma i vantaggi finali di utenti più felici, migliori classifiche di ricerca e maggiori entrate rendono tutto utile.

Tuttavia, migliorare l'UX mobile non significa rendere le cose uguali o addirittura simili. Si tratta di far funzionare meglio le cose e di abbassare le barriere all'adozione. Una volta padroneggiate le migliori pratiche, designer e sviluppatori possono innovare e espandersi per creare design unici che infrangono o infrangono le regole.

Fornire la migliore esperienza utente mobile possibile è il modo migliore per incoraggiare i visitatori del sito che la tua azienda è, in effetti, la scelta giusta.

La maggior parte delle tendenze e dei suggerimenti che ho discusso qui sono facili da implementare e non richiedono molte risorse o sforzi, mentre alcuni potrebbero richiedere una riprogettazione più approfondita.

Migliorando l'UX mobile, stai affermando chiaramente che ti interessa il tipo di esperienza che gli utenti hanno con la tua attività e questo è il miglior messaggio del marchio che puoi trasmettere. Siamo qui per aiutare!

Non sei sicuro di come migliorare l'UX mobile?

Il miglioramento dell'esperienza utente mobile è fondamentale per fornire la migliore esperienza utente possibile. L'usabilità è essenziale se intendi attrarre e coinvolgere il consumatore mobile sempre più esigente.

Vuoi migliorare l'UX mobile per la tua presenza online? Il nostro team di designer professionisti sarà felice di aiutarti in questo. Ma, prima, guarda il nostro portfolio e leggi i nostri casi di studio.

Quindi, se ritieni che siamo adatti alle tue esigenze di design mobile, parliamone! Offriamo una gamma completa di soluzioni di consulenza e progettazione per aziende e marchi di prodotti.

Se non sei sicuro di come il miglioramento dell'esperienza utente mobile avvantaggia la tua azienda o il tuo marchio di prodotto, possiamo aiutarti! Il nostro team ascolterà le tue preoccupazioni, valuterà le tue esigenze e svilupperà un elenco di cose di cui hai bisogno per migliorare l'UX mobile e l'usabilità.

Hai migliorato l'esperienza utente mobile sul tuo sito web?

Hai provato qualcuno dei miei suggerimenti per migliorare l'UX mobile? Quali hai provato e che tipo di risultati hai ottenuto? Hai altri suggerimenti o idee su come migliorare l'UX mobile?

Sentiti libero di commentare di seguito in modo che il nostro pubblico possa beneficiare e prendere il nostro feed in modo da non perdere il nostro prossimo post! E sentiti libero di condividere il nostro post con il tuo pubblico!

Grazie! Apprezziamo il tuo aiuto per porre fine ai siti Web commerciali dannosi, un pixel alla volta!

Di Gregor Saita
Co-fondatore / CXO
@gregorsaita