6 errori di design da evitare su siti per mobile

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 un elenco di errori di design comunemente commessi sui siti mobile, elenco corredato da qualche suggerimento per evitare questo tipo di errori.

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 più recenti.

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.

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. 

2. Le immagini e i 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.

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.

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.

4. I contenuti del sito non si leggono con facilità

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.

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!

5. Il tuo sito è affollato di contenuti

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.

Vuoi creare un sito web tutto tuo? Scopri qui come creare il design di un sito senza ricorrere a un professionista!

6. Ci sono 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.

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.