{"id":44087,"date":"2021-04-06T11:37:24","date_gmt":"2021-04-06T09:37:24","guid":{"rendered":"https:\/\/kinsta.com\/?p=92617&preview=true&preview_id=92617"},"modified":"2023-02-02T09:47:07","modified_gmt":"2023-02-02T08:47:07","slug":"elementi-selezionabili-troppo-vicini-tra-loro","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/elementi-selezionabili-troppo-vicini-tra-loro\/","title":{"rendered":"Come Risolvere l’Errore “Elementi Selezionabili Troppo Vicini Tra Loro” (3 Metodi)"},"content":{"rendered":"

I problemi di usabilit\u00e0 mobile irrisolti possono avere un impatto significativo sul traffico del vostro sito web. Un problema comune di cui Google Search Console<\/a> pu\u00f2 avvisarvi \u00e8 l’errore “Elementi selezionabili troppo vicini”, che probabilmente significa che il vostro sito \u00e8 complesso da navigare per chi usa un dispositivo mobile.<\/p>\n

Pi\u00f9 di 4,32 miliardi di persone<\/a> accedono a internet dai loro dispositivi mobili. \u00c8 quindi fondamentale risolvere questo errore relativo agli elementi selezionabili il pi\u00f9 presto possibile. Fortunatamente, ci sono diversi modi per farlo e rendere il vostro sito web pi\u00f9 mobile-friendly.<\/p>\n

In questo articolo, spiegheremo cos’\u00e8 il problema degli “Elementi selezionabili troppo vicini”, vedremo perch\u00e9 accade e vi guideremo attraverso tre metodi che potete usare per risolverlo. Spiegheremo anche cos’\u00e8 l’errore “Contenuti pi\u00f9 grandi rispetto allo schermo” e come potete risolverlo.<\/p>\n

Mettiamoci al lavoro!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

L’Errore “Elementi selezionabili troppo vicini”<\/h2>\n

In poche parole, gli errori di usabilit\u00e0 mobile possono rendere il vostro sito WordPress inaccessibile<\/a> e pi\u00f9 difficile da navigare per gli utenti da mobile. Potete usare il rapporto \u201cUsabilit\u00e0 su dispositivi mobili\u201d<\/a> di Google Search Console per testare il vostro sito.<\/p>\n

\n

\"Lo
Lo strumento \u201cUsabilit\u00e0 su dispositivi mobili\u201d di Google Search Console Mobile Usability Report<\/figcaption><\/figure><\/figure>\n

Ci sono sei tipi principali di problemi di usabilit\u00e0 mobile, e sono:<\/p>\n

    \n
  1. Utilizza plugin non compatibili<\/li>\n
  2. Viewport non impostato<\/li>\n
  3. Viewport non impostato in base alla larghezza del dispositivo<\/li>\n
  4. Testo troppo piccolo da leggere<\/li>\n
  5. Contenuti pi\u00f9 grandi rispetto allo schermo<\/li>\n
  6. Elementi selezionabili troppo vicini tra loro<\/li>\n<\/ol>\n

    Come parte di questo rapporto, Google Search Console controller\u00e0 tutti gli elementi selezionabili del vostro sito web, come pulsanti e link. Lo scopo \u00e8 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.<\/p>\n

    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\u00e0 apparire l’errore “Elementi selezionabili troppo vicini tra loro” nel rapporto riassuntivo.<\/p>\n

    \n

    \"Un
    Un rapporto sui problemi di usabilit\u00e0 mobile da Google Search Console<\/figcaption><\/figure><\/figure>\n

    Se fate clic sull’errore, arriverete alla pagina dei dettagli e dello stato. In questa schermata potete trovare pi\u00f9 informazioni sul problema, comprese le pagine interessate.<\/p>\n

    \n

    \"L'errore
    L’errore di Google Search Console “Elementi selezionabili troppo vicini<\/figcaption><\/figure><\/figure>\n

    Essenzialmente, l’errore degli elementi selezionabili \u00e8 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.<\/p>\n

    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).<\/p>\n

    Anche se avere elementi selezionabili troppo vicini \u00e8 classificato come un errore di usabilit\u00e0 mobile, risolvere questo problema pu\u00f2 anche migliorare l’accessibilit\u00e0 del vostro sito<\/a>. Per esempio, le persone con problemi di manualit\u00e0 apprezzano un po’ di spazio in pi\u00f9 tra gli elementi interattivi. Gli utenti con problemi di vista, invece, possono trovare pi\u00f9 facile interagire con pulsanti e link grandi e chiaramente definiti.<\/p>\n\n

    Perch\u00e9 Pu\u00f2 Apparire l’Errore “Elementi Selezionabili Troppo Vicini<\/h3>\n

    Diversi fattori possono provocare il problema “Elementi selezionabili troppo vicini”. A volte, \u00e8 solo perch\u00e9 Google non ha potuto richiedere le risorse necessarie durante il rendering. Se questo \u00e8 il caso, allora potete provare a usare il test mobile-friendly<\/a> e vedere se si risolve. Se lo fa, probabilmente potete ignorarlo.<\/p>\n

    Questo problema pu\u00f2 anche derivare dal design del vostro sito web<\/a>. Per esempio, se provate a schiacciare troppi elementi interattivi su una singola pagina web, potreste vedere questo errore di usabilit\u00e0 mobile.<\/p>\n

    Un’altra ragione per l’errore degli elementi selezionabili \u00e8 che c’\u00e8 un problema con la reattivit\u00e0 mobile<\/a> 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 \u00e8 responsive, questo potrebbe generare problemi di usabilit\u00e0.<\/p>\n

    Pi\u00f9 specificamente, se il vostro sito web non \u00e8 responsive, parti di esso possono apparire allungate, rimpicciolite o deformate su schermi specifici. Sui dispositivi con schermi pi\u00f9 piccoli, gli elementi selezionabili possono apparire stretti o distorti.<\/p>\n

    Identificare alcune delle ragioni standard e potenziali per cui questo errore si verifica pu\u00f2 aiutarvi a capire meglio perch\u00e9 il vostro sito sta incontrando problemi di usabilit\u00e0 mobile. Vi aiuter\u00e0 anche a determinare come risolvere il problema.<\/p>\n

    Come Risolvere l’Errore “Elementi Selezionabili Troppo Vicini” (3 Metodi)<\/h2>\n

    Se gli utenti da mobile faticano a navigare nel vostro sito web, cosa li trattiene dall’abbandonarlo<\/em>? Prevenire questo problema \u00e8 essenziale per risolvere tutti i problemi di usabilit\u00e0 mobile il pi\u00f9 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.<\/p>\n

    1. Usate il Plugin YellowPencil Visual Customizer WordPress<\/h3>\n

    YellowPencil Visual Customizer<\/a> \u00e8 un plugin frontend per WordPress<\/a> che vi permette di modificare i file CSS e del tema del vostro sito web senza alcuna codifica.<\/p>\n

    \n

    \"Il
    Il plugin WordPress YellowPencil Visual Customizer<\/figcaption><\/figure><\/figure>\n

    Questo plugin \u00e8 utile per modificare le dimensioni dei vostri target selezionabili, ad esempio per rendere i vostri pulsanti pi\u00f9 grandi. Potete anche creare pi\u00f9 spazio tra gli elementi selezionabili cambiando i margini e la spaziatura tra di essi.<\/p>\n

    Potete scaricare il plugin YellowPencil gratuitamente o acquistare una licenza regolare o estesa<\/a>. Per usarlo, prima installatelo e attivatelo sul vostro sito WordPress andando su Plugin <\/strong>> Aggiungi nuovo<\/strong>, cercando il plugin e poi facendo clic su Installa adesso > Attiva.<\/strong><\/p>\n

    \n

    \"L'opzione
    L’opzione per installare il plugin YellowPencil in WordPress<\/figcaption><\/figure><\/figure>\n

    Poi, andate su YellowPencil <\/strong>> Customizations<\/strong>. Sotto la scheda Customizations<\/strong>, selezionate Let\u2019s start!<\/strong><\/p>\n

    \n

    \"La
    La pagina “Customizations” del plugin YellowPencil WordPress<\/figcaption><\/figure><\/figure>\n

    L’interfaccia del customizer visuale si caricher\u00e0 e vi chieder\u00e0 di selezionare la pagina che ha causato l’errore di usabilit\u00e0 mobile.<\/p>\n

    \n

    \"L'interfaccia
    L’interfaccia del plugin YellowPencil Visual Customizer<\/figcaption><\/figure><\/figure>\n

    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. <\/strong><\/p>\n

    Fate la vostra selezione e poi clic su Continue<\/strong>. Ora potete farvi strada attraverso la vostra pagina web, selezionando ogni elemento da toccare. YellowPencil mostrer\u00e0 un pannello di opzioni di modifica per quell’elemento.<\/p>\n

    \n

    \"Opzioni
    Opzioni CSS del customizer visivo di YellowPencil per gli elementi selezionabili<\/figcaption><\/figure><\/figure>\n

    Per esempio, nello screenshot qui sotto, abbiamo selezionato Padding <\/strong>e aggiunto 10 pixel su tutti i lati per aumentare lo spazio tra i target da selezionare:<\/p>\n

    \n

    \"Le
    Le impostazioni di padding nel customizer visivo del plugin YellowPencil<\/figcaption><\/figure><\/figure>\n

    Le impostazioni Size <\/strong>e Position <\/strong>aiutano anche a risolvere l’errore “Elementi selezionabili troppo vicini”. Anche se non \u00e8 necessario, se volete modificare direttamente il codice CSS, potete farlo attraverso il pannello di sinistra.<\/p>\n

    Poi potete passare al prossimo elemento che sta causando problemi di usabilit\u00e0 mobile e ripetere il processo. Quando le modifiche vi soddisfano, fate clic sul pulsante verde Save.<\/strong><\/p>\n

    2. Assicurarsi Che Tutti i Target Selezionabili Siano di Almeno 48px<\/h3>\n

    \u00c8 impossibile creare un singolo design statico che sia bello e <\/em>funzioni correttamente su tutti i dispositivi. Invece, sarebbe meglio se puntaste a creare un layout flessibile <\/em>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.<\/p>\n

    Su un dispositivo mobile, il target minimo consigliato per la selezione con il tocco \u00e8 di 48×48 pixel<\/a>. Equivale a circa 9 mm, che \u00e8 sufficiente per il polpastrello di una persona media.<\/p>\n

    Quindi, se state lottando per capire esattamente quali elementi sono alla base del problema, pu\u00f2 essere utile guardare i dpi di ogni elemento. Se \u00e8 al di sotto dell’obiettivo touch raccomandato (ad esempio 24px), potete aumentare il padding per portarlo a 48px.<\/p>\n

    Potete controllare il valore calcolato di un’area selezionabile usando Chrome DevTools<\/a> o Firefox DevTools<\/a>, a seconda del browser che preferite<\/a>. Useremo Chrome come esempio.<\/p>\n

    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<\/strong>.<\/p>\n

    \n

    \"L'opzione
    L’opzione “Ispeziona” nel browser Chrome<\/figcaption><\/figure><\/figure>\n

    Facendo clic su Ispeziona <\/strong>si aprir\u00e0 Chrome DevTools. Lungo la parte superiore, fate clic sull’icona che mostra i dispositivi mobili, che vi porter\u00e0 alla schermata Toggle device toolbar<\/strong>.<\/p>\n

    \n

    \"L'opzione
    L’opzione “Toggle device toolbar” in Chrome DevTools<\/figcaption><\/figure><\/figure>\n

    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:<\/p>\n

    \n

    \"La
    La console Google Chrome DevTools<\/figcaption><\/figure><\/figure>\n

    Se necessario, potete poi regolare il dimensionamento di un elemento modificando direttamente i vostri file CSS<\/a> e del sito o usando un plugin come YellowPencil.<\/p>\n

    3. Controllare il Metodo di Input<\/h3>\n

    Se state cercando di risolvere l’errore “Elementi selezionabili troppo vicini”, pu\u00f2 essere utile controllare il metodo di input<\/a>. Si riferisce al metodo o al dispositivo che l’utente sta usando per visualizzare e interagire con il vostro sito. Pi\u00f9 specificamente, potete vedere se stanno usando uno smartphone, un tablet o altri dispositivi.<\/p>\n

    Per esempio, il tocco \u00e8 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\u00f2 rendere i target selezionabili pi\u00f9 facili per le persone che usano dispositivi tattili per interagire con il vostro sito web.<\/p>\n

    Tuttavia, determinare il dispositivo di un utente non \u00e8 una scienza esatta. Questa tecnica usa il cosiddetto “puntatore” per controllare il metodo di input primario dell’utente, che pu\u00f2 avere uno dei due valori:<\/p>\n