“Bisogna che tutto cambi perché tutto rimanga com’è.”
La celebre frase del Gattopardo si adatta anche alla progettazione di una pagina web in versione mobile partendo dalla versione desktop. Già partiamo male, perché bisognerebbe sempre ragionare in ottica mobile-first. Tuttavia, il desktop ha un tasso di abbandono inferiore, quindi per capire come strutturare il mobile conviene capire cosa funziona qui e cosa invece va storto sul mobile.
Partiamo dai dati
Secondo StatCounter, a livello globale:
- 55% delle visite online proviene da dispositivi mobile
- 43% da desktop
- 2% da tablet
In alcuni settori, la navigazione mobile può rappresentare fino al 90% del traffico. Eppure, molti siti continuano a offrire un’esperienza frustrante su smartphone e tablet.
Mobile vs desktop: devono essere uguali o diversi?
La risposta è ovvia: diversi. Ma diversi come?
Diversi in modo da conciliare le esigenze SEO e il bisogno dell’utente di trovare in fretta quello che cerca senza perdere la pazienza.
Eh sì, perché questo è il rischio maggiore, che si può comprendere solo pensando a come vengono visitati i siti da mobile.
La navigazione da mobile è un’altra cosa
Navigare da smartphone non è come farlo da desktop. I tempi di attenzione online sono sempre più brevi ma gli utenti mobile, in particolare, passano meno tempo sui siti web.
Da mobile l’utente è più distratto, più impaziente e più selettivo, perché si trova in un contesto molto diverso: magari sta aspettando il bus, o è in coda al bar, o ha solo trenta secondi prima che torni il capo.
Le sessioni da mobile sono brevi, frammentate, interrotte da mille notifiche e spesso guidate da un intento preciso e urgente: voglio questa informazione ADESSO. In pochi secondi l’utente deve capire cosa offri, fidarsi e trovare il bottone giusto. Altrimenti ciao ciao utente!
Anche la UI mobile deve essere diversa
La verità è che un conto è essere mobile-first, un conto è non essere fastidioso.
La velocità di caricamento è sicuramente il primo punto da tenere in considerazione, visto che circa la metà dei visitatori abbandona un sito web per dispositivi mobili se le pagine non vengono caricate entro tre secondi. Ma la velocità non è tutto. Il vero punto focale è la UI.
Come progettare una UI mobile che garantisca una buona user experience?
La risposta è semplice solo in apparenza: bisogna differenziare, senza cadere nella pigrizia.
Un buon design mobile è un sistema reattivo, capace di adattarsi davvero al contesto d’uso.
Molti siti oggi sono “mobile-friendly” solo sulla carta. Certo, si adattano allo schermo, il menu si chiude a hamburger, le immagini si ridimensionano. Ma l’esperienza d’uso resta faticosa e poco fluida. Faticosa in modo sottile, silenzioso, quasi impercettibile. Quel genere di attrito sottile che non sai spiegare… ma ti fa chiudere la pagina.
E a confermarlo non è l’istinto, ma i dati: sono proprio gli A/B test dei designer UI più attenti a dimostrare che una singola variabile – una frase più breve, un bottone più visibile, un’animazione in meno – può cambiare completamente il comportamento dell’utente. E far convertire di più.
Ma prima di tutto, come la mettiamo con la SEO?
Un passo indietro: cosa dice la SEO
La SEO rompe sempre le scatole. 😜 Quando copywriter e designer partono per i loro voli pindarici, ecco che arriva lei, con il suo manuale di paletti e vincoli. Eppure – diciamolo – ha quasi sempre ragione. Perché la SEO si mette dalla parte di chi il sito lo deve leggere e capire.
“E se va bene a me, buona lettura a tutti.” — dice il crawler.
Il simpatico ragnetto, quando passa a visitare il nostro sito, non vuole essere preso in giro. Si aspetta di trovare le stesse informazioni sia su desktop che su mobile.
Con l’arrivo dell’indicizzazione mobile-first, Google ha chiarito che utilizza principalmente la versione mobile di un sito per determinare il ranking nei risultati di ricerca.
Questo significa che:
- Tutto ciò che è importante (testi, immagini, link, metadati) deve esserci anche su mobile
- Se sul desktop hai contenuti che poi spariscono su smartphone, Google li ignora
- Anche se il layout può cambiare (fisarmoniche, tab, slider ecc.), il contenuto deve rimanere equivalente
In caso contrario, addio traffico: Google semplicemente non vede una parte delle informazioni.
E così torniamo al Gattopardo: perché tutto resti uguale (SEO-friendly), qualcosa deve cambiare (UI mobile). Ogni informazione deve essere fruibile facilmente in relazione al contesto in cui si trova.
Gli errori di UI a cui forse non hai pensato
Michal Malewicz, che nel suo articolo “Full guide to mobile web conversion” ci prende per mano e ci mostra che no, non basta spostare i contenuti del desktop uno sotto l’altro per dire “abbiamo fatto la versione mobile”.
Quello è adattamento pigro, il motivo per cui le persone chiudono il sito dopo due scroll e mezzo.
Il suo articolo è interessante perché – A/B test alla mano – dimostra che una vera UI mobile richiede un ripensamento strutturale, quasi come progettare un sito da zero. Stesso contenuto, ma in un formato completamente diverso. Uguale ma diverso, come il Gattopardo insegna.
Vediamo quindi i 5 errori più frequenti nelle sezioni hero su mobile, secondo Malewicz:
Spazio bianco insufficiente
Siccome lo schermo è piccolo, qualcuno pensa bene di stipare tutto. Risultato? Un’accozzaglia di elementi schiacciati tra loro, gerarchia visiva saltata, e un utente in overdose cognitiva.
Ansia pura ➡︎ Fuga
Animazioni eccessive
Su desktop magari fanno scena. Su mobile distraggono, rallentano il caricamento e confondono il cervello (già impegnato a decifrare l’interfaccia).
Non è mica PowerPoint 2002! ➡︎ Anche meno
Bottoni troppo piccoli
Lo schermo è piccolo, ok, ma le dita non necessariamente. Se un bottone è più piccolo del pollice medio di un adulto, non è un bottone: è una provocazione. E le provocazioni, si sa, spesso si pagano.
In questo caso con il bounce rate.
Visual troppo complessi
Troppe linee, troppi dettagli, troppa confusione. L’utente non ha tempo né voglia di zoommare per capire.
Tipo una dashboard in miniatura dentro un mockup di telefono, su un telefono … What?!
Testo non ottimizzato
Per essere SEO friendly, le informazioni devono esserci tutte perché, se il crawler non le trova, ti cancella dai suoi pensieri. Ma attenzione: non significa che devono essere identiche. Il testo va riscritto, adattato, compattato.
Font più grande = Frasi corte, messaggi diretti.
In breve: bisogna ripensare, come se il sito fosse nuovo. Diverso nella forma, identico nella sostanza.
In un mondo dove l’attenzione dell’utente è sempre più ridotta, è fondamentale progettare interfacce mobile che siano veloci, intuitive e ottimizzate. Ricorda: meno è meglio. Semplifica, testa e adatta costantemente il tuo design alle esigenze degli utenti
