Errori UX
Indice

Gli errori più comuni nella UX mobile

Cosa troverai in questo articolo. A causa delle dimensioni limitate dello schermo degli smartphone e della più elevata possibilità di errori di digitazione che ne consegue, lo sviluppo di un sito web mobile richiede accortezze diverse rispetto a quelle necessarie per un sito desktop. Tra gli errori che vengono compiuti più comunemente per quanto riguarda la UX mobile rientrano ad esempio la mancanza di indicatori visivi rispetto alla posizione corrente dell’utente all’interno della gerarchia del sito, l’utilizzo di etichette di navigazione troppo generiche, la non accurata gestione dell’autocomplete, la mancanza o incompletezza di strategie di correzione degli errori che impediscono all’utente di concludere un acquisto e una scarsa spaziatura e dimensionamento degli elementi “tappabili”. Le strategie risolutive non sono in genere molto onerose, a fronte però di notevoli benefici in termini di conversioni e miglioramento del livello di soddisfazione degli utenti.

Sebbene molte buone pratiche del design mobile siano ormai diventate di dominio comune, come l’uso del “pinch” per fare zoom su pagine e contenuti multimediali, alcuni errori di UX in grado di incidere anche molto negativamente sulle conversioni sono ancora piuttosto diffusi. Entriamo allora subito nel vivo della questione analizzando i problemi più comuni nella UX mobile e le strategie di risoluzione.

Problemi di navigazione

Come è facile immaginare, uno dei problemi più comuni di UX per quanto riguarda i siti mobile riguarda la facilità di navigazione. Mentre infatti un menù desktop è immediatamente visibile all’utente e la maggiore ampiezza della schermata permette di inserire al suo interno un numero molto elevato di voci, ciò non è materialmente possibile sul display ridotto di uno smartphone.

Nonostante la meccanica del cosiddetto hamburger menu sia perfettamente nota a pressoché qualsiasi utente mobile, il tipo di interazione con i siti web non cambia in maniera sostanziale su dispositivi diversi come un PC e uno smartphone: la prima azione compiuta infatti da qualsiasi utente, a prescindere che navighi da desktop o da mobile, è quella di aprire il menù principale per orientarsi nella gerarchia del sito. Questo avviene in maniera consistente se l’utente atterra su una pagina molto specifica arrivando dalla SERP o da un altro canale esterno.

Per questo motivo, quando la posizione corrente dell’utente non viene evidenziata nella navigazione principale l’utente fa più fatica a orientarsi e deve affidarsi ancora di più alle . Fin dalla prima interazione, dunque, la UX si appoggia su gambe piuttosto malferme.

L’ostacolo immediatamente successivo, quando si tratta di navigazione mobile, riguarda poi la tipologia di etichette presenti nel menù: su molti siti si osserva infatti la presenza di etichette generiche come “Shop”, “Catalogo” o “Tutti i prodotti”, in verità sconsigliabile lato UX; raggruppare tutte le categorie sotto etichette di questo genere, infatti, mette generalmente gli utenti in difficoltà quando si tratta di proseguire la navigazione. Al contrario, utilizzare come primo elemento visibile nel menù il livello delle categorie prodotto (ad esempio etichette come “Uomo”, “Donna” e “Bambino” per un e-commerce di abbigliamento) si dimostra una scelta più intuitiva oltre a ridurre comunque di uno il numero di clic necessari all’utente per raggiungere il contenuto di proprio interesse.

Inoltre, per servire tutte le necessità di navigazione, bisognerebbe sempre prevedere, all’interno di ogni categoria principale, una voce “Vedi tutti” per permettere all’utente che non abbia in mente una tipologia precisa di prodotto da consultare, di consultare l’elenco completo di oggetti disponibile all’interno di quel macrogruppo: ad esempio, sotto “Pantaloni” avremo l’etichetta “Vedi tutti i pantaloni” che precede le etichette “Jeans”, “Pantaloni eleganti”, “Tute” e così via. L’etichetta principale “Pantaloni”, anche se cliccabile, di fatto non viene usata dagli utenti per navigare l’intera categoria perché non si tratta per loro di un’azione sufficientemente intuitiva da fare.

Per riassumere, ecco dunque alcuni consigli per evitare i problemi di navigazione più comuni dei siti web mobile:

  1. Evidenziare la posizione corrente dell’utente nel menù di navigazione principale, mantenendo “esplose” tutte le eventuali categorie e sottocategorie di livello superiore rispetto alla pagina in cui egli si trova. L’evidenziazione si ottiene in genere con una colorazione differente e a contrasto;
  2. Usare il primo livello delle categorie prodotto come navigazione principale del menù per evitare che l’elemento evidenziato sia un irrilevante “Shop” o un generico “Prodotti” che non aiuterebbero affatto gli utenti a capire dove si trovano;
  3. Inserire una voce di navigazione “Vedi tutti” per ogni categoria principale di prodotti di modo che l’utente possa visualizzare l’elenco completo di quei prodotti senza restringere la propria ricerca.

 

Web design software

Problemi di interazione e design

Abbiamo già parlato in passato su questo blog della corretta gestione in ottica CRO dei messaggi di errore sui siti web. Qui ci limitiamo a ricordare che, per i motivi menzionati nel paragrafo precedente, l’errore di battitura è una costante della navigazione mobile e pertanto è fondamentale fornire all’utente strategie di correzione dell’errore semplici da attuare. Relativamente agli e-commerce, questo aspetto si palesa in maniera evidente durante il processo di acquisto di un prodotto, con tutti i passaggi di inserimento dati che esso richiede.

Per evitare la frustrazione dell’utente e un eventuale abbandono del carrello, attenetevi a questa lista di consigli:

  • Notificate in maniera chiara all’utente la presenza di errori che impediscano la conclusione del procedimento di acquisto: molto spesso, infatti, ci si limita a bloccare l’avanzamento verso il passaggio successivo senza però comunicare la presenza di un problema all’utente, che quindi pensa a un malfunzionamento del sito; questo si traduce in elevati tassi di abbandono del carrello;
  • Evidenziate in maniera graficamente distintiva il punto esatto in cui si è verificato l’errore insieme a suggerimenti per risolverlo: la soluzione migliore è colorare il campo contenente errori e aggiungere un avviso testuale di fianco o sotto di esso; nella scelta della colorazione ricordate che il rosso non può essere riconosciuto da alcune persone;
  • Implementate l’autoscroll per portare l’utente direttamente nel punto in cui si è verificato l’errore nel caso in cui vi sia solo un errore;
  • Prevedete un box a inizio pagina che riassuma, in un elenco puntato, tutti gli errori verificatisi se questi sono più di uno (in questo caso, l’autoscroll dovrebbe rimanere disattivo);
  • Considerate l’implementazione di un address validator per evitare successivi problemi nella consegna dei pacchi: questi sistemi attingono ai database dei corrieri garantendo l’esattezza dell’indirizzo di destinazione, anche perché eliminano la necessità per l’utente di inserire manualmente l’intero indirizzo usando la piccola tastiera dello smartphone;
  • Utilizzate tastiere specifiche per input specifici: ad esempio, per facilitare l’inserimento corretto del numero della carta di credito o del numero di telefono dovrebbe essere presentato all’utente il tastierino numerico; grazie alla presenza dei soli numeri e un’area toccabile più grande, si generano meno errori di battitura rispetto alla normale QWERTY.

Come possiamo dedurre da queste indicazioni, per l’utente è di cruciale importanza ricevere un feedback più o meno istantaneo sulla correttezza delle azioni compiute sul sito. Oltre ai messaggi d’errore in fase di acquisto, un’altra area in cui è importante fornire feedback visivi chiari all’utente è quella del caricamento dei contenuti: se per qualche motivo (una connessione lenta, file multimediali pesanti e così via) i contenuti richiesti dall’utente non possono essere caricati in maniera tempestiva, utilizzate indicatori grafici ad alto contrasto per far capire che il caricamento sia effettivamente in corso in modo tale da evitare che l’utente, pensando che la sua richiesta non sia andata a buon fine, abbandoni la pagina. Per funzionare al meglio, il caricamento degli indicatori dovrebbe avvenire entro un secondo dall’azione dell’utente e aggiornarsi ogni circa 10 secondi.

Parlando più in generale di interazione con gli elementi di navigazione, poi, bisognerebbe sempre tenere a mente la necessità di calibrare attentamente la spaziatura degli elementi su cui è possibile fare tap per evitare che si sovrappongano o siano così vicini da causare il tocco involontario del pulsante o link sbagliato. Come criterio guida si può tenere quello dei 2 millimetri, ma è possibile aumentare questa misura se gli errori continuano ad essere frequenti. Al contempo, l’area su cui è possibile fare tap dovrebbe essere sufficientemente grande, cioè occupare uno spazio di almeno 7x7mm.

Creative team brainstorming meeting plans for group problem solving ideas, creative teamwork to

Riassumendo: le domande più comuni sulla UX mobile

Concludiamo questo approfondimento con una serie di FAQ relative alla UX mobile. Se non trovate risposta alla vostra domanda, scriveteci: saremo felici di chiarire tutti i vostri dubbi e arricchire ulteriormente questo contenuto grazie alle vostre segnalazioni.

Quali difficoltà aggiuntive presenta la UX mobile rispetto a quella desktop?

La UX mobile presenta sfide uniche rispetto a quella desktop, come le dimensioni ridotte dello schermo, l’interazione touch, le limitazioni hardware e la gestione della batteria. È necessario un design ottimizzato per garantire un’esperienza utente fluida e intuitiva in vari contesti d’uso mobile.

Gli errori di navigazione possono causare frustrazione e confusione agli utenti, spingendoli a abbandonare l’app o il sito in cerca di alternative più user-friendly. Ciò può portare a un calo delle conversioni e del successo complessivo dell’app o del sito.

Non dovrebbe avere etichette generiche come “Shop” o “Tutti i prodotti”; il primissimo livello di navigazione dovrebbe corrispondere alle categorie principali di prodotti; ogni categoria dovrebbe includere, in prima posizione, un link “Vedi tutti” per permettere all’utente di navigare tutta la categoria senza ulteriori restrizioni.

È consigliabile ottimizzare l’algoritmo di ricerca per restituire risultati pertinenti e completi, implementare suggerimenti di ricerca automatica, consentire la ricerca predittiva e includere filtri e opzioni di ricerca avanzate per aiutare gli utenti a raffinare i loro risultati.

Sì. Deve però essere in grado di riconoscere gli errori di digitazione e i sinonimi più comuni utilizzati dagli utenti.

Questo problema è in genere dovuto alla mancanza di feedback visivi in grado di confermare all’utente che la sua azione sia stata registrata. Durante il caricamento di contenuti specifici o intere pagine, il sito dovrebbe dunque restituire un chiaro indicatore grafico mostrato entro 1 secondo dall’azione dell’utente e aggiornato ogni 10 secondi circa.

Nel caso di un errore singolo, la soluzione migliore è la seconda, abbinata a un autoscroll verso quel punto della pagina. Nel caso di errori multipli, invece, è preferibile un disclaimer a inizio pagina che elenchi tutti i campi contenenti errori.

2 millimetri è una distanza mediamente opportuna per evitare tap involontari su link sbagliati. Nel caso in cui i test di usabilità rivelino però un persistere di errori involontari, è possibile aumentare la distanza fino a 10 millimetri.

È necessario inserire l’attributo “autocorrect” nel tag “input” dandogli il valore “off”, ad es.: <input type=”text” autocorrect=”off” />.

È necessario usare gli attributi “type” e “pattern” del tag “input”.

Coming soon:

Il blog di Seed torna fra due settimane con un approfondimento dedicato ai fattori di ranking su Google. Non perdetevelo!

Facebook
Twitter
Pinterest
LinkedIn

Growth Plan

Piano di crescita gratuito
per il tuo sito web

Articoli Correlati

Growth Plan

Piano di crescita gratuito
per il tuo sito web

Formazione

Webinar gratuito
“il futuro della SEO”

×