Mobile first: cosa non è più accettabile vedere nel 2017

Se ne parla dal 2012, migliaia di articoli online trattano l’argomento, tuttavia continuano ad esistere siti web non ottimizzati per la visualizzazione da mobile.

In questo articolo ti offriamo una lista di situazioni/criticità che purtroppo continuano a verificarsi e che vanno contro le logiche del mobile first. In particolar modo parliamo di:

  1. tempi di attesa per caricare il contenuto di una pagina;
  2. lunghezza della pagina;
  3. template/disposizione del contenuto desktop-friendly
  4. menu di navigazione troppo strutturati
  5. dispersione dello spazio above the fold
  6. layout non responsive


1) Tempi di attesa per caricare il contenuto di una pagina

Capita molto spesso di trovarsi a tu per tu con siti web che fanno molta fatica a caricare i contenuti interni. Devi sapere, infatti, che la velocità di un sito è uno dei fattori più importanti da tenere in considerazione, sia per quanto riguarda il posizionamento organico, sia per quanto riguarda la user experience.

Partiamo dal posizionamento organico: più rapidamente vengono servite le risorse che compongono la pagina web (html, javascript, css, immagini, ecc.), più facilmente gli spider dei motori di ricerca riescono a navigare attraverso le risorse del sito e ad interpretarne i contenuti (lo spider ha un tempo limite prefissato per scansionare i contenuti; se le risorse del sito non vengono richiamate in tempo breve, si corre il rischio di far uscire lo spider dal sito stesso con la conseguenza di non riuscire a fargli scansionare eventuali nuovi contenuti presenti).

In termini di user experience la velocità del sito è fondamentale perché l’utente non può perdere tempo: stiamo parlando di un potenziale cliente che sta cercando delle informazioni sul tuo sito o che è interessato all’acquisto di un tuo prodotto; l’attesa potrebbe provocare un tale grado di stress e disagio da rischiare di compromettere per sempre la possibilità di convertire.

Mediamente perché un sito web sia performante, deve caricarsi in meno di 2 secondi.

Scopri come rendere il tuo sito velocissimo, leggi qui!

2) Lunghezza della pagina

Quando si progetta un sito internet con la logica “mobile first” è importante capire quali sono gli elementi fondamentali da mostrare agli utenti che visitano le tue pagine con uno smartphone o un tablet.

Capita spesso di vedere siti web responsive che richiamano da mobile tutti gli elementi di layout della pagina desktop, con conseguente aumento della lunghezza (verticale) della pagina web.

Questa criticità, oltre a generare confusione agli occhi del visitatore, compromettere le prestazioni della pagina web, aumentando il tempo di caricamento del contenuto.

 

3) Template/disposizione del contenuto desktop-friendly

Come specificato nel punto precedente, per realizzare un sito mobile first è necessario capire come disporre e strutturare gli elementi in maniera da poter rendere visibili al visitatore le informazioni più importanti a colpo d’occhio.

Cosa può succedere se non viene progettata la pagina web in ottica mobile-first?

Esempio pratico: sito web ecommerce con layout a 2 colonne. Nella colonna di sinistra abbiamo un menu contenente una lista di 20 categorie; nella colonna di destra invece, abbiamo le breadcrumb, il titolo della pagina, la descrizione dettagliata e l’elenco dei prodotti.

1

La visualizzazione da desktop è perfetta, lato mobile invece visualizziamo questo:

2

Come puoi vedere, il contenuto principale (cioè i prodotti) non è in primo piano e per cercarli bisogna scendere lungo la pagina.

Questo non va bene perché l’utente non ha trovato subito l’informazione che cercava.

Questa criticità si presenta molto frequentemente su siti ecommerce o siti di notizie.

Ecco un sito web ecommerce che rispetta le logiche mobile first:

3


4) Menu di navigazione troppo strutturati

Un altro problema che affligge molti siti web consiste nel menu di navigazione con troppe voci e link a fisarmonica che aprono ulteriori sotto menu in stile “matriosca”.

4

Questo rappresenta un grosso ostacolo perché crea confusione al visitatore e gli impedisce una piacevole navigazione.

Il menu di un sito mobile first deve essere innanzitutto facile da trovare e da consultare, chiaro e conciso, deve riportare i link alle pagine più utili per l’utente e non deve contenere tutta la sitemap!

Ad esempio, il menu di un sito web ecommerce dovrebbe mettere il visitatore nelle condizioni di trovare con facilità i prodotti e le categorie di prodotto, come in questo caso:

htd


5) Dispersione dello spazio above the fold

Questa criticità, riscontrabile spesso nei siti web realizzati con WordPress, consiste nel ritrovarsi a visualizzare la pagina in questo modo:

7

Dimensioni eccessive del logo del sito, slideshow con immagine (il più delle volte di bassa qualità) che occupa quasi tutto lo spazio disponibile del display e banner cookie law, bloccano la visualizzazione del contenuto principale.

Ecco alcune delle criticità generate:

  • aumento della lunghezza della pagina web – l’altezza della hero image o dello slideshow fanno sì che la lunghezza in verticale della pagina web aumenti;
  • pesantezza della pagina: molte volte gli slideshow richiamati dai template vengono gestiti con plugin o componenti aggiuntivi che non ottimizzano le immagini, di conseguenza le stesse immagini di grosse dimensioni, richiamate nella versione desktop, vengono caricate anche sui dispositivi mobile causando l’aumento dei tempi di caricamento del sito.

Ottimizzare lo spazio above the fold della homepage molte volte può risultare una scelta vincente e, se combinata con la scelta di un headline accattivante e di una call to action persuasiva, può anche aumentare la possibilità di generare una conversione.

Due esempi di contenuto above the fold pensato con la logica mobile first?
Eccoli qui:

hub-gibus

6) Layout non responsive

Questo è il problema più grave, il peggiore! Trovarsi a navigare da smartphone un sito web non ottimizzato per la visualizzazione da mobile. Cosa può succedere ad un utente medio che si trova a navigare su un sito del genere?

Leggiamo assieme questo racconto.

Questo weekend mi è scaduto il bollo dell’auto, fortunatamente una vocina nella mia testa mi chiedeva: “Hei, ma sei sicuro di essere in regola con la macchina? Non è che ti manca qualcosa? … il bollo!”.

Ecco che mi appresto a Googlare “calcolo bollo auto”.

10

Apro il primo risultato, il sito web dell’agenzia delle entrate e …tadaaan!

Ecco cosa vedo:

11

Inizio a sforzare la vista per capire cosa c’è scritto e dopo un paio di secondi, mi accorgo che c’è un link all’interno del testo con scritto “calcolo del bollo in base alla targa”. Ok, proviamo a cliccare qui, magari trovo il form che mi interessa.

12

Ora ditemi se su uno schermo da 4,7 pollici è possibile compilare questo form.

Io ci provo lo stesso e seguo la procedura, quindi:

  1. scelgo la tipologia del veicolo;
  2. scorro la pagina con le dita;
  3. inserisco la mia targa;
  4. scorro la pagina con le dita;
  5. compilo il codice captcha;
  6. scorro la pagina con le dita.

Finalmente premo il pulsante “calcola importo” e…

13

… ecco come visualizzo la pagina! Rassegnato, cerco di cliccare il link quasi invisibile che mi permette di tornare indietro e compilare nuovamente il codice captcha, dove scopro di dover inserire nuovamente tutti i dati!

A questo punto spengo il telefono, apro il pc e ripeto la procedura riuscendo questa volta a completarla.

Questo episodio fa capire quanto sia importante avere un sito web navigabile da mobile e che permetta all’utente di visualizzarlo in modo ottimale, perché, ad esempio:

  • se fosse stato il carrello di un sito web ecommerce, l’utente non avrebbe completato l’acquisto;
  • se fosse stato un portale turistico, l’utente non avrebbe chiesto informazioni;
  • se fosse stato un portale immobiliare, l’utente non avrebbe chiesto informazioni all’agenzia immobiliare;
  • se fosse stato un qualsiasi sito web, nella maggior parte dei casi, l’utente se ne sarebbe andato via (per sempre).

Pensi che il tuo sito web sia affetto da almeno una di queste criticità? Non preoccuparti, noi possiamo aiutarti,contattaci!

LinkedInDeliciousEmailFacebookCondividi