Aiuto Registrati

Disastri di design su siti mobile (e come evitarli)

Disastri di design su siti mobile (e come evitarli)

Molto spesso si sente parlare di “mobile first”. Ma cosa significa veramente? In pratica, significa creare un sito (o programmare un software) che possa essere usato principalmente da mobile invece che da desktop. Negli ultimi anni il numero di persone che utilizza internet dal proprio smartphone o tablet è aumentato considerevolmente ed è previsto che continui ad aumentare. Ecco perché un sito che funzioni e appaia bene su mobile è fondamentale per attirare nuovi visitatori e minimizzare il bounce rate (abbandoni prematuri) da dispositivi mobili.

 

Molti sono convinti che se il loro sito è bello su desktop lo sarà anche su mobile, semplicemente in versione ridotta. Ma non è sempre così. E se una buona fetta delle visite sul tuo sito proviene da mobile (puoi verificarlo nella sezione Statistiche del tuo sito) è ancora più importante ottimizzare il tuo sito per mobile.

 

Abbiamo creato una raccolta di comuni disastri che avvengono sui siti mobile, con qualche suggerimento per scoprire come evitarli. 


Disastro 1: il tuo template non è responsive

Probabilmente hai creato il tuo sito anni fa e finalmente è proprio come lo vuoi tu (almeno su desktop). Se hai lo stesso template da parecchio, molto probabilmente è uno dei nostri più vecchi. Lo puoi riconoscere perché i nostri vecchi template hanno un codice come nome (ad esempio F4242) invece che il nome di una città come quelli nuovi. I vecchi template sono “mobile friendly” ma non sono responsive come quelli nuovi.

 

Ma che cos’ha di meglio un sito responsive? In pratica, si adatta automaticamente alla dimensione del dispositivo utilizzato dal visitatore. La risoluzione, le immagini e il menu di navigazione verranno visualizzati impeccabilmente da tablet, desktop o smartphone. Ed è anche meglio per la SEO, visto che Google individua e indicizza più facilmente i siti responsive.

 

Non hai mai visualizzato il tuo sito da mobile? O non hai voglia di cambiare il template e riorganizzare il tuo sito? Ti capiamo benissimo! Ma prova a fare caso a tutte le persone intorno a te, in autobus o in treno, che stanno costantemente navigando sui loro dispositivi mobili. Sono tutti potenziali visitatori e clienti che potresti attirare sul tuo sito con non più un’ora extra di lavoro ogni settimana.

Template non responsive
Template non responsive
Template responsive
Template responsive

Soluzione

Verifica il tuo attuale template aprendo la Toolbar e selezionando Design > Template. Il template in uso apparirà nell’angolo in alto a sinistra. Assicurati che il nome del tuo template sia quello di una città. Se non lo è, il tuo template non è responsive e ti consigliamo caldamente di cambiarlo con uno più moderno. Puoi usare questo strumento per vedere come il tuo sito viene visualizzato sui diversi dispositivi.

Disastro 2: le tue immagini e i tuoi video rallentano il tuo sito

Cerca il tuo sito su un dispositivo mobile e conta quanto ci mette a caricarsi. Se la risposta è tre o più secondi allora dovresti cercare all’interno della tua pagina che cosa rallenta il caricamento. I principali sospetti sono video, animazioni add-on in generale. Fermati a pensare se questi elementi hanno davvero un valore per il tuo sito  e se vale la pena tenerli al costo del caricamento più lento (senza contare tutti i dati mobile che fa consumare!). Google ti permette di utilizzare uno strumento gratuito per la diagnosi dei siti mobile. Inserisci il tuo URL e ti verranno offerti suggerimenti per migliorare il tuo sito mobile.

 

Tieni presente che anche tutti i widget o bottoni di condivisione per i social che utilizzano uno JavaScript esterno rallentano il caricamento. Seleziona da due a quattro canali social a cui vuoi dare la priorità o utilizza i bottoni integrati di Jimdo per rendere il caricamento della tua pagina più rapido.

 

Un’altra buona  abitudine è ottimizzare le immagini sul tuo sito; significa ridimensionare le immagini riducendo la dimensioni del file prima di caricarlo. Esistono moltissimi strumenti che possono aiutarti a ridurre le dimensioni di un'immagine senza ridurre la qualità. Anche un piccolo ridimensionamento può fare una grande differenza su pagine con molte immagini o quando si tratta dell’immagine di sfondo. Ricordati anche che i tempi di caricamento della pagina rientrano nel fatto SEO di Google, quindi tempi troppo lunghi potrebbero avere un effetto negativo sul tuo ranking.

Soluzione

 Verifica quanto ci vuole perché la tua pagina si carichi su mobile poi valuta il tuo sito e rimuovi/ottimizza tutti gli elementi che potrebbero essere la causa del rallentamento.

Disastro 3: non c’è gerarchia visuale

Quando ci sono troppi elementi l’occhio non sa se concentrarsi sul logo, sull’intestazione o sulla call to action. Navigare su un sito mobile richiede già abbastanza tempo e l’esperienza dell’utente è migliore quando il contenuto è suddiviso in sezioni con un ordine logico. Crea titoli per ogni sezione utilizzando le diverse dimensioni dei titoli (H1, H2, H3). Crea un’esperienza intuitiva che mantenga gli utenti sulla tua pagina più a lungo, aumentando le possibilità che acquistino qualcosa.

 

Le informazioni importanti dovrebbero trovarsi nella parte superiore del sito, e i dettagli più in basso. Pensa a quello che i tuoi visitatori si aspettano di trovare e a rispondere alle cinque fondamentali domande: Chi? Cosa? Perché? Dove? Quando?. Chiediti anche se sul tuo sito sono identificati chiaramente il messaggio e lo slogan.

Un esempio di sito con una struttura chiara e gerarchia visuale
Un esempio di sito con una struttura chiara e gerarchia visuale

Soluzione

Pianifica il tuo sito. Questo ti aiuterà a creare una traccia del tuo sito e delle diverse categorie, e quindi ad eliminare quello che non ti serve.

Disastro 4: il tuo sito non si legge bene

Immagina di avere i migliori contenuti del mondo ma nessuno li legge perché devono strizzare gli occhi e zoomare continuamente per leggere. Questo problema è ancora peggiore sugli smartphone, che hanno schermi più piccoli dei tablet.

 

Quel font serif è bellissimo su desktop, ma leggerlo su mobile e decisamente troppo sforzo. Prova ad utilizzare un font sans serif come Open Sans o Roboto, che sono facili da leggere, e verifica che le dimensioni del font siano abbastanza grandi. Una regola generale è di mantenere il corpo del tuo sito ad una dimensione minima di 16pt, ma tieni presente che questo numero potrebbe cambiare a seconda del font che usi.

 

Anche alcune immagini di sfondo possono rendere il sito meno leggibile da mobile. Cerca di limitarti ad un semplice colore per lo sfondo e che sia in armonia con il colore del testo.

Assicurati che il colore dello sfondo e quello del testo siano in contrasto per rendere il sito ben leggibile.
Assicurati che il colore dello sfondo e quello del testo siano in contrasto per rendere il sito ben leggibile.

Soluzione

Guarda sempre l’anteprima del tuo sito. Questa funzione ti permette di visualizzare un’anteprima del tuo sito in modalità sia desktop che mobile. Puoi anche chiedere ai tuoi amici e parenti di dare un’occhiata al tuo sito dai loro dispositivi e chiedere un feedback. Se hanno avuto problemi a leggere potrebbe essere giunto il momento di semplificare il tuo sito. Un semplice sfondo bianco con alcuni blocchi di colore per valorizzare il contenuto non sono necessariamente noiosi!

Disastro 5: il tuo sito è troppo affollato

Lasciare dello spazio è ancora più importante sui piccoli schermi, perché in questo modo le dita hanno spazio per cliccare un bottone alla volta e non sbagliare. Gli utenti mobile hanno bisogno di testi e bottoni ancora più grandi per poter usare comodamente il tuo sito.

 

Le call to action (CTA) devono essere grandi almeno 30-40px. Gli utenti mobile fanno spesso acquisti impulsivi quindi se il sito è difficile da navigare e difficile da cliccare, potrebbe scoraggiare la transazione. Assicurati che sia facile sia individuare che cliccare sulla tua CTA.

 

Molti elementi e colori diversi possono dare un aspetto disordinato al tuo sito e scoraggiare i tuoi visitatori. In questo caso è necessario inserire degli spazi bianchi tra i paragrafi e tutti gli altri elementi. Gli spazi bianchi rendono il tuo sito molto più facile da navigare e aiutano a concentrarsi sui testi più importanti.

 

Se anche tu, come me, navighi mentre sei sull’autobus, probabilmente leggi solo le cose principali. Il che significa che vuoi essere in grado di individuare al volo le informazioni che ti servono. Quando sei di corsa, non hai tempo di leggere lunghi blocchi di testo parola per parola. Assicurati che i tuoi testi siano brevi e che riescano a dare tutte le informazioni fondamentali anche con una lettura superficiale.

Soluzione

Assicurati di lasciare abbastanza spazio intorno a tutti i tuoi elementi e testi in modo che i tuoi visitatori non si sentano sopraffatti dalla quantità di informazioni. Considera anche di sostituire i link nel testo con dei bottoni, più facili da cliccare.

Disatro 6: troppi pop-up

Hai presente quella sensazione di fastidio quando ti rendi conto che devi riempire un formulario online per accedere al wi-fi gratuito dell’aeroporto? Quando consideri di aggiungere dei pop-up che richiedono di digitare su uno schermo, pensaci. La navigazione su mobile è già abbastanza difficile senza metterci anche la digitazione sullo schermo. Cerca di mantenere tutto il più semplice possibile e di richiedere il minor numero di azioni possibile da parte del visitatore.

 

Se devi inserire un sondaggio sulla soddisfazione del cliente, ad esempio, rendilo semplice (con degli smiley per esempio) e aggiungi una casella di testo per commenti aggiuntivi e opzionali. Se devi inserire l’iscrizione alla tua newsletter cerca di chiedere solo le informazioni fondamentali o utilizza menu a discesa.  

Soluzione

Dai un’occhiata alla vasta selezione di formulari offerta da JotForm oppure aggiunti una chat pop-up con, ad esempio, Pure Chat. Come puoi vedere qui sotto, puoi trovare un add-on che è una semplice e non invasiva nuvoletta di testo in fondo alla pagina. Uno strumento di questo tipo non interrompe l’esperienza del tuo utente e i tuoi visitatori saranno più invogliati a cliccarci. Però ricordati che si tratta pur sempre di un add-on e che quindi potrebbe rallentare il caricamento della tua pagina.

blackyeti.com è un esempio dell’importanza degli spazi vuoti e di una chiara call-to-action. Hai visto la nuvoletta in fondo alla pagina? É una chat per supporto in tempo reale.
blackyeti.com è un esempio dell’importanza degli spazi vuoti e di una chiara call-to-action. Hai visto la nuvoletta in fondo alla pagina? É una chat per supporto in tempo reale.
Pure Chat è un discreto add-on che permette di interagire con il supporto in tempo reale e appare in primo piano solo dopo avere cliccato.
Pure Chat è un discreto add-on che permette di interagire con il supporto in tempo reale e appare in primo piano solo dopo avere cliccato.

Il segreto per il design su mobile è la semplicità. Su uno schermo piccolo il minimalismo è decisamente la tattica vincente. È importante ricordarsi delle difficoltà che uno schermo su cui digitare può causare all’utente. Il trucco è creare il tuo sito pensando a chi lo utilizza con le dita, rendendo ogni sezione facile da cliccare e scorrere. Assicurati che i tuoi visitatori possano trovare al volo le informazioni più importanti e di seguire questi consigli, e vedrai che sarai già a cavallo! Se hai ancora dei dubbi, puoi tentare con un test per la usability.

 

Se non hai ancora provato la nostra app gratuita, questa è un’ottima occasione. É la soluzione ideale per avere il tuo sito sempre sotto controllo, anche quando non sei alla scrivania.


Hai consigli sul tema design di siti mobile? Faccelo sapere nei commenti! 

Nico Scagliarini

Jimdo Team

 

Articoli che potresti trovare interessanti:

Fridel: viaggio nella Valle dei Fondatori
>> leggi di più

Disastri di design su siti mobile (e come evitarli)
>> leggi di più

Il tuo pannello di controllo: tutti i tuoi siti in un posto solo
>> leggi di più


Scrivi commento

Commenti: 7
  • #1

    Veronica (giovedì, 31 agosto 2017 14:17)

    Ma come si fa a creare più siti senza perdere i vecchi?

  • #2

    Massimo (giovedì, 31 agosto 2017 17:37)

    Le immagini inserite in una "Galleria" possono essere visualizzate, se lo si vuole, anche in forma di slideshow. La toolbar, purtroppo, non permette di settare l'intervallo di tempo fra una foto e l'altra e - a mio parere - l'intervallo di default è troppo breve.

  • #3

    Pasqule (giovedì, 31 agosto 2017 17:50)

    Salve, secondo me dovete fare in modo che il template deve essere modificabile anche per smartphone, molte volte vado in difficoltà come sicuramente anche altri utenti.
    Buona Giornata

  • #4

    bruno montagna (venerdì, 01 settembre 2017)

    ho fatto il test google ed ecco il risultato https://search.google.com/test/mobile-friendly?id=yOP13YaYsheWH7OCndbgaQ
    mi sembra buono però il fondo animato non funziona sul mobile e funziona benissimo sul pc
    come posso risolvere?

  • #5

    Angie (sabato, 02 settembre 2017 20:18)

    Ciao, articolo davvero utile, grazie. A breve proverò i vari test. Confermo che il mio sito è visto dal 50 al 55% da dispositivi mobili. Intanto mi associo al commento di Pasquale sulla possibilità di modificare il mobile da desktop. Il mio template, Rome, è responsive, ma parzialmente nei fatti. Da mobile taglia le immagini in testata, e da schermi più grandi di quello con cui l'ho costruito (17 pollici), sempre le immagini di testata, sono tagliate in senso orizzontale.
    A presto ;)

  • #6

    Daniele (martedì, 05 settembre 2017)

    Buongiorno, volevo chiedere una info, il mio sito usa come template Cape Town e se ho capito bene dovrebbe essere uno di quelli che si auto adatta ai vari dispositivi, come mai su smart o iphone il calendario nella pagina attività nonè visibile per intero e non c'è possibilità di scorrere lateralmente per visionarlo tutto... grazie Daniele

  • #7

    Luca Cameli (mercoledì, 06 settembre 2017 22:08)

    Jimdo dovrebbe permettere una personalizzazione del template separata tra la versione pc e mobile.
    Soprattutto per quanto riguarda i colori dei caratteri del menu navigazione ed anche dei contenuti.