I problemi di usabilità mobile irrisolti possono avere un impatto significativo sul traffico del vostro sito web. Un problema comune di cui Google Search Console può avvisarvi è l’errore “Elementi selezionabili troppo vicini”, che probabilmente significa che il vostro sito è complesso da navigare per chi usa un dispositivo mobile.
Più di 4,32 miliardi di persone accedono a internet dai loro dispositivi mobili. È quindi fondamentale risolvere questo errore relativo agli elementi selezionabili il più presto possibile. Fortunatamente, ci sono diversi modi per farlo e rendere il vostro sito web più mobile-friendly.
In questo articolo, spiegheremo cos’è il problema degli “Elementi selezionabili troppo vicini”, vedremo perché accade e vi guideremo attraverso tre metodi che potete usare per risolverlo. Spiegheremo anche cos’è l’errore “Contenuti più grandi rispetto allo schermo” e come potete risolverlo.
Mettiamoci al lavoro!
L’Errore “Elementi selezionabili troppo vicini”
In poche parole, gli errori di usabilità mobile possono rendere il vostro sito WordPress inaccessibile e più difficile da navigare per gli utenti da mobile. Potete usare il rapporto “Usabilità su dispositivi mobili” di Google Search Console per testare il vostro sito.
Ci sono sei tipi principali di problemi di usabilità mobile, e sono:
- Utilizza plugin non compatibili
- Viewport non impostato
- Viewport non impostato in base alla larghezza del dispositivo
- Testo troppo piccolo da leggere
- Contenuti più grandi rispetto allo schermo
- Elementi selezionabili troppo vicini tra loro
Come parte di questo rapporto, Google Search Console controllerà tutti gli elementi selezionabili del vostro sito web, come pulsanti e link. Lo scopo è quello di verificare se gli utenti da mobile possono interagire comodamente con gli elementi del sito web usando solo il tatto, piuttosto che tramite tastiera o mouse.
Se Google Search Console determina che i vostri elementi selezionabili con il tocco di un dito rappresentano una sfida per gli utenti da mobile, farà apparire l’errore “Elementi selezionabili troppo vicini tra loro” nel rapporto riassuntivo.
Se fate clic sull’errore, arriverete alla pagina dei dettagli e dello stato. In questa schermata potete trovare più informazioni sul problema, comprese le pagine interessate.
Essenzialmente, l’errore degli elementi selezionabili è un avvertimento che indica che gli elementi del vostro sito WordPress che si possono selezionare con il dito sono troppo piccoli e quindi gli utenti da mobile non possono interagire comodamente.
In alternativa, potrebbe significare che sono abbastanza grandi, ma posizionati troppo vicini ad altri elementi circostanti. Se pulsanti, link e altri elementi selezionabili con il tocco del dito sono troppo vicini, gli utenti rischiano di toccare quelli sbagliati, e questo danneggia la User Experience (UX).
Anche se avere elementi selezionabili troppo vicini è classificato come un errore di usabilità mobile, risolvere questo problema può anche migliorare l’accessibilità del vostro sito. Per esempio, le persone con problemi di manualità apprezzano un po’ di spazio in più tra gli elementi interattivi. Gli utenti con problemi di vista, invece, possono trovare più facile interagire con pulsanti e link grandi e chiaramente definiti.
Perché Può Apparire l’Errore “Elementi Selezionabili Troppo Vicini
Diversi fattori possono provocare il problema “Elementi selezionabili troppo vicini”. A volte, è solo perché Google non ha potuto richiedere le risorse necessarie durante il rendering. Se questo è il caso, allora potete provare a usare il test mobile-friendly e vedere se si risolve. Se lo fa, probabilmente potete ignorarlo.
Questo problema può anche derivare dal design del vostro sito web. Per esempio, se provate a schiacciare troppi elementi interattivi su una singola pagina web, potreste vedere questo errore di usabilità mobile.
Un’altra ragione per l’errore degli elementi selezionabili è che c’è un problema con la reattività mobile del design del vostro sito. Il vostro sito web dovrebbe essere flessibile e adattarsi automaticamente al dispositivo specifico delle persone che lo visitano per fornire loro la migliore UX possibile. Tuttavia, se il vostro sito non è responsive, questo potrebbe generare problemi di usabilità.
Più specificamente, se il vostro sito web non è responsive, parti di esso possono apparire allungate, rimpicciolite o deformate su schermi specifici. Sui dispositivi con schermi più piccoli, gli elementi selezionabili possono apparire stretti o distorti.
Identificare alcune delle ragioni standard e potenziali per cui questo errore si verifica può aiutarvi a capire meglio perché il vostro sito sta incontrando problemi di usabilità mobile. Vi aiuterà anche a determinare come risolvere il problema.
Come Risolvere l’Errore “Elementi Selezionabili Troppo Vicini” (3 Metodi)
Se gli utenti da mobile faticano a navigare nel vostro sito web, cosa li trattiene dall’abbandonarlo? Prevenire questo problema è essenziale per risolvere tutti i problemi di usabilità mobile il più rapidamente possibile. Diamo un’occhiata a tre metodi che potete utilizzare per risolvere l’errore “Elementi selezionabili troppo vicini” e fornire una migliore UX ai vostri utenti da mobile.
1. Usate il Plugin YellowPencil Visual Customizer WordPress
YellowPencil Visual Customizer è un plugin frontend per WordPress che vi permette di modificare i file CSS e del tema del vostro sito web senza alcuna codifica.
Questo plugin è utile per modificare le dimensioni dei vostri target selezionabili, ad esempio per rendere i vostri pulsanti più grandi. Potete anche creare più spazio tra gli elementi selezionabili cambiando i margini e la spaziatura tra di essi.
Potete scaricare il plugin YellowPencil gratuitamente o acquistare una licenza regolare o estesa. Per usarlo, prima installatelo e attivatelo sul vostro sito WordPress andando su Plugin > Aggiungi nuovo, cercando il plugin e poi facendo clic su Installa adesso > Attiva.
Poi, andate su YellowPencil > Customizations. Sotto la scheda Customizations, selezionate Let’s start!
L’interfaccia del customizer visuale si caricherà e vi chiederà di selezionare la pagina che ha causato l’errore di usabilità mobile.
Potete applicare le vostre modifiche a questa pagina specifica o a tutto il vostro sito web. Se molte pagine presentano l’errore degli elementi selezionabili, potreste voler selezionare Global.
Fate la vostra selezione e poi clic su Continue. Ora potete farvi strada attraverso la vostra pagina web, selezionando ogni elemento da toccare. YellowPencil mostrerà un pannello di opzioni di modifica per quell’elemento.
Per esempio, nello screenshot qui sotto, abbiamo selezionato Padding e aggiunto 10 pixel su tutti i lati per aumentare lo spazio tra i target da selezionare:
Le impostazioni Size e Position aiutano anche a risolvere l’errore “Elementi selezionabili troppo vicini”. Anche se non è necessario, se volete modificare direttamente il codice CSS, potete farlo attraverso il pannello di sinistra.
Poi potete passare al prossimo elemento che sta causando problemi di usabilità mobile e ripetere il processo. Quando le modifiche vi soddisfano, fate clic sul pulsante verde Save.
2. Assicurarsi Che Tutti i Target Selezionabili Siano di Almeno 48px
È impossibile creare un singolo design statico che sia bello e funzioni correttamente su tutti i dispositivi. Invece, sarebbe meglio se puntaste a creare un layout flessibile definendo tutti i vostri target selezionabili usando pixel indipendenti dal dispositivo (dpi). Gli elementi che sono definiti usando i dpi possono automaticamente scalare in base alle dimensioni dello schermo dell’utente.
Su un dispositivo mobile, il target minimo consigliato per la selezione con il tocco è di 48×48 pixel. Equivale a circa 9 mm, che è sufficiente per il polpastrello di una persona media.
Quindi, se state lottando per capire esattamente quali elementi sono alla base del problema, può essere utile guardare i dpi di ogni elemento. Se è al di sotto dell’obiettivo touch raccomandato (ad esempio 24px), potete aumentare il padding per portarlo a 48px.
Potete controllare il valore calcolato di un’area selezionabile usando Chrome DevTools o Firefox DevTools, a seconda del browser che preferite. Useremo Chrome come esempio.
Per controllare il valore dpi di uno degli elementi selezionabili sul vostro sito WordPress, apritelo in una scheda del browser Chrome e andate alla pagina che presenta l’errore “Elementi selezionabili troppo vicini”. Fate clic con il tasto destro del mouse sulla pagina e selezionate Ispeziona.
Facendo clic su Ispeziona si aprirà Chrome DevTools. Lungo la parte superiore, fate clic sull’icona che mostra i dispositivi mobili, che vi porterà alla schermata Toggle device toolbar.
Nel pannello di anteprima a sinistra, vedrete un’emulazione del vostro sito per dispositivi mobili. Se ci passate sopra e fate clic su uno qualsiasi degli elementi selezionabili, potete visualizzare il valore calcolato sulla destra:
Se necessario, potete poi regolare il dimensionamento di un elemento modificando direttamente i vostri file CSS e del sito o usando un plugin come YellowPencil.
3. Controllare il Metodo di Input
Se state cercando di risolvere l’errore “Elementi selezionabili troppo vicini”, può essere utile controllare il metodo di input. Si riferisce al metodo o al dispositivo che l’utente sta usando per visualizzare e interagire con il vostro sito. Più specificamente, potete vedere se stanno usando uno smartphone, un tablet o altri dispositivi.
Per esempio, il tocco è considerato un metodo di input impreciso. Come abbiamo appena discusso, l’utilizzo di CSS per aumentare le dimensioni dei vostri target tattili o aggiungere un padding extra può rendere i target selezionabili più facili per le persone che usano dispositivi tattili per interagire con il vostro sito web.
Tuttavia, determinare il dispositivo di un utente non è una scienza esatta. Questa tecnica usa il cosiddetto “puntatore” per controllare il metodo di input primario dell’utente, che può avere uno dei due valori:
- Coarse: Il metodo di input primario del dispositivo è il tocco.
- Fine: Il metodo di input è un mouse e un trackpad.
Notate che se il tocco è il metodo di input primario dell’utente, questo suggerisce che la persona sta visualizzando il vostro sito web su uno smartphone o tablet.
Tuttavia, la presenza di un touchscreen non garantisce che qualcuno stia usando un dispositivo mobile. Potrebbe accedere al vostro sito usando un grande computer portatile dotato di touchscreen, o potrebbe aver collegato un dispositivo Bluetooth al suo smartphone.
Se il puntatore restituisce un valore coarse, potete regolare le dimensioni del target selezionabile usando i CSS. Per farlo, potete inserire quanto segue nel file CSS del vostro tema WordPress (o utilizzando un plugin come YellowPencil):
.container a {
padding: .2em;
}
@media (pointer: coarse) {
.container a {
padding: .8em;
}
}
Dopo aver aggiustato il CSS, potete dire a Google di eseguire una nuova scansione del vostro sito web per determinare se questo ha risolto il problema.
In alternativa, è possibile chiedere a Google di eseguire il recrawl di singoli URL usando lo strumento Controllo URL. Dopo aver inviato il vostro URL tramite questo strumento, selezionate Richiedere l’indicizzazione. Lo strumento di ispezione testerà quindi l’URL per qualsiasi problema di indicizzazione evidente.
Supponendo che Google non trovi problemi, la pagina si qualificherà per l’indicizzazione.
In alternativa, se avete un gran numero di URL, potete inviare una sitemap. Per ogni pagina che richiede la reindicizzazione, aggiornate il suo tag <lastmod> con la data dell’ultima modifica. È quindi possibile inviare questa sitemap usando lo strumento di segnalazione sitemap di Google.
Nella maggior parte dei casi, la sitemap del vostro sito passerà immediatamente. Tuttavia, Google potrebbe impiegare un po’ di tempo per scansionare tutti gli URL nella vostra sitemap, a seconda di fattori come la dimensione del sito, il traffico e l’attività. Non c’è nemmeno alcuna garanzia che Google esegua la scansione di ogni singolo URL nella vostra sitemap del sito.
Cos’È l’Errore “Contenuti Più Grandi Rispetto allo Schermo”
Come potreste ricordare, Google Search Console può avvertirvi di vari errori di usabilità mobile. Oltre a “Elementi selezionabili troppo vicini”, il vostro rapporto riassuntivo potrebbe anche includere il problema “Contenuti più grandi rispetto allo schermo”.
Questo problema apparirà nella Google Search Console nello stesso posto in cui compare l’errore “Elementi selezionabili”. Allo stesso modo, le cause potenziali sono molteplici.
Perché Può Apparire l’Errore “Contenuti Più Grandi Rispetto allo Schermo”
Questo errore si verifica quando il design del vostro sito si espande orizzontalmente, costringendo gli utenti da mobile a scorrere lateralmente per visualizzare il contenuto “fuori dallo schermo”. Per fornire una buona esperienza all’utente, quando possibile dovreste evitare lo scorrimento orizzontale.
È più probabile che incontriate il problema “Contenuti più grandi rispetto allo schermo” se usate valori assoluti nelle vostre dichiarazioni CSS. Poiché i layout non flessibili possono provocare l’errore “Elementi selezionabili”, non è raro incontrare questi due errori nello stesso rapporto di usabilità mobile.
Come Risolvere l’Errore “Contenuti Più Grandi Rispetto allo Schermo” (5 Metodi)
Se il vostro rapporto include l’errore “Contenuti Più Grandi Rispetto allo Schermo”, potete usare alcuni semplici metodi per risolverlo. Diamo un’occhiata a cinque delle opzioni più comuni.
1. Evitare l’Uso di Variabili Assolute nelle Dichiarazioni CSS
Uno dei modi migliori per risolvere l’errore “Contenuti Più Grandi Rispetto allo Schermo” è quello di evitare di usare variabili assolute nelle vostre dichiarazioni CSS. Il vostro contenuto non dovrebbe richiedere una specifica viewport per essere visualizzato e funzionare correttamente.
Perciò, invece di usare valori assoluti, dovreste optare per valori relativi di larghezza e posizione per i vostri elementi CSS. Usando valori relativi ovunque possibile, potete creare layout flessibili che si adattano a una gamma di dimensioni dello schermo.
2. Assegnare alle Immagini una Larghezza Massima
Un’immagine con dimensioni fisse può apparire più grande del viewport e, a sua volta, innescare l’errore “Contenuti Più Grandi Rispetto allo Schermo”. Per assicurarvi che le vostre immagini scalino in base alle dimensioni dello schermo, è meglio assegnare a tutte le immagini una larghezza massima del 100%.
Questo forzerà l’immagine a ridursi per adattarsi allo spazio disponibile. Anche se usate max-width, dovreste comunque usare gli attributi width e height nel vostro tag <image>, dato che i moderni browser web usano queste informazioni per riservare lo spazio per le immagini durante il caricamento. Usando il tag <image>, potete evitare spostamenti di layout quando le vostre immagini appaiono finalmente sullo schermo.
3. Utilizzare i Tag Meta Viewport
Per impostazione predefinita, i browser mobile rendono la pagina alla larghezza dello schermo del desktop, che di solito è intorno ai 980px. Il browser cercherà quindi di ottimizzare la vostra pagina aumentando la dimensione dei caratteri e scalando il vostro contenuto per adattarlo alle dimensioni dello schermo attuale.
Sfortunatamente, questo comportamento predefinito può portare a delle incongruenze. Alcuni utenti potrebbero aver bisogno di zoomare per leggere e interagire con il vostro contenuto, ecco perché potreste vedere questo errore.
Invece di fare affidamento su questo comportamento predefinito, dovreste dare al browser istruzioni su come controllare le dimensioni e la scala della pagina. Potete farlo inserendo un tag meta viewport nell’intestazione del vostro documento.
4. Utilizzare le Moderne Tecniche di Layout CSS
Potete anche risolvere l’errore “Contenuti più grandi rispetto allo schermo” cambiando il layout del vostro sito. Per aiutarvi a creare layout più flessibili, potreste considerare l’implementazione di tecniche come Flexbox, CSS Grid Layout, o Multiple-Column Layout (Multicol).
5. Usare le Media Queries CSS Dove Appropriato
Le media queries possono rendere più facile cambiare gli stili in base al dispositivo dell’utente, compresi i touchscreen. Pertanto, se avete ancora a che fare con l’errore “Contenuti più grandi rispetto allo schermo” a questo punto, vi raccomandiamo di usare le media queries CSS dove appropriato.
Dopo aver fatto queste modifiche, sarà il momento di fare dei test per vedere se avete risolto con successo l’errore “Contenuti più grandi rispetto allo schermo”. Potete farlo eseguendo di nuovo il rapporto “Usabilità su dispositivi mobili” e convalidando la correzione usando i passi che vedremo nella prossima sezione.
Come Verificare e Convalidare la Risoluzione degli Errori
Indipendentemente da quale degli errori visti sopra avete a che fare o dai metodi che usate per risolverli, è essenziale determinare se le vostre modifiche hanno risolto il problema. È possibile farlo eseguendo nuovamente i test di usabilità mobile di Google.
Per farlo, tornate al vostro rapporto di usabilità mobile e individuate l’errore “Elementi selezionabili troppo vicini”. Quindi, selezionate l’opzione Validate fix.
Notate che potete ripetere questi stessi passi se state cercando di verificare e convalidare la risoluzione dell’errore per “Contenuti più grandi rispetto allo schermo”. Google scansionerà il vostro sito web, e riceverete un messaggio che vi farà sapere che è in procinto di convalidare la modifica.
Se avete risolto l’errore, allora Google Search Console mostrerà un messaggio “Passed” e un segno di spunta verde di accompagnamento. D’altra parte, se le correzioni che avete implementate non sono state convalidate, dovrete rivisitare l’errore per implementare una soluzione alternativa.
Riepilogo
Gli errori di usabilità mobile non risolti possono generare una scarsa esperienza utente e possono causare un notevole calo del traffico del vostro sito web. Prendendo provvedimenti per risolvere gli errori di usabilità, potete assicurarvi che il vostro sito web sia mobile-friendly e accessibile a un maggior numero di persone.
In questo articolo, avete imparato come risolvere l’errore “Elementi selezionabili troppo vicini” usando tre metodi:
- Modificare il sito web usando un plugin di editor di stile CSS front-end (come YellowPencil).
- Usare Chrome DevTools per assicurarvi che tutti i target selezionabili siano 48 dpi o più grandi.
- Controllare il metodo di inserimento e regolare il vostro CSS di conseguenza.
Avete qualche domanda su come risolvere l’errore “Elementi selezionabili troppo vicini”? Fatecelo sapere nei commenti qui sotto!
Lascia un commento