In un mondo dove il mobile first ha preso il sopravvento, dove la navigazione da mobile la fa da padrona, parliamo di Thumb Zone, termine sconosciuto ai più che non deve essere ignorato da chi fa responsive web design.
Web design Responsive: realizzare siti responsive adatti a tutti i dispositivi mobili
Devi sapere che l’89,8% di chi naviga online utilizza un dispositivo mobile.
Questo significa che il tuo sito web oltre a essere perfettamente navigabile da laptop e desktop, deve essere navigabile correttamente da tutti i dispositivi mobili.
Quindi se il tuo sito web non è stato realizzato anche per essere navigato da mobile, e di conseguenza non si visualizza bene o risulta difficile da navigare, potresti perdere potenziali clienti.
Con l’avanzare degli anni, le dimensioni degli smartphone sono aumentate sempre più e il modo in cui li utilizziamo e li sorreggiamo per navigare sono cambiati notevolmente.
Mentre prima la parte alta dello schermo era facilmente raggiungibile da tutte le dita di qualsiasi dimensione, ora la parte bassa dello schermo è quella più facile da raggiungere.
Oggi si parla di “thumb-driven design” o all’italiana “design guidato dal pollice”.
Thumb-driven design, cos’è?
Questo termine, è stato utilizzato per la prima volta da Steven Hoober e Josh Clark nella loro ricerca dedicata al modo in cui le persone utilizzano lo smartphone.
Principalmente gli utenti sorreggono lo smartphone in tre modi differenti, influenzati senza dubbio dalla dimensioni degli smartphone ma anche dalla dimensioni delle mani/dita con.
il 75% degli utenti tocca lo schermo solo dito, solitamente il pollice, il 36% degli utenti usa entrambe le mani e solamente il 10% degli utenti tiene il telefono con una mano (destra o sinistra che sia) e tocca lo schermo con un dito dell’altra.
Da questa ricerca è risultato che non importa come sorreggi il tuo dispositivo mentre lo utilizzi, ma quello che è importante sapere è che la parte bassa dello schermo è quella più facilmente raggiungibile da tutti e, quella in alto, è diventata la più difficile da toccare.
E’ proprio per questo che la parte bassa dello schermo deve essere sfruttata al meglio, proprio come la parte alta above the fold che troviamo nei siti in versione desktop.
Come sfruttare la parte bassa di un sito web versione mobile?
Possiamo sfruttare la parte inferiore dello schermo dello smartphone inserendo un menu di navigazione inferiore fissato in basso che rimane sempre visibile durante lo scroll.
In questo modo l’utente avrà il menù sempre a portata di mano (o di dito) e la navigazione sarà più fluida e veloce.
C’è da dire però, che il Gruppo Nielsen ha riscontrato che la navigazione ad hamburger (menu chiuso), navigazione nascosta e attivabile con un click, risulta meno utilizzata e quindi sarebbe meglio mantenere le voci di menu estese e visibili.
Responsive mobile: esiste un’ alternativa all’hamburger menu?
Per risolvere o per lo meno aggirare questo problema, la soluzione migliore è quella di avere una doppia navigazione, una navigazione superiore ad hamburger (dove verrà esposto anche il logo che sarà sempre ben visibile) con le voci secondarie, meno importanti ai fini della navigazione/conversione utente-cliente, e una navigazione inferiore, ben visibile ed estesa con al suo interno, due o tre voci importanti, voci che potrebbero anche essere sostituite da icone chiare e ben rappresentative (parlanti).
Diverse sono le aziende che sono passate a questo tipo di navigazione, abbandonando il mercato delle app trasformando la navigazione del loro sito simile a quella delle app che troviamo nei nostri smartphone.
Un esempio di Thumb zone sfruttata al massimo
Qui sotto come vedi ci sono tre smartphone con tre screenshot di un sito che ho realizzato per un mio collaboratore Alessandro Ingala – alessandroingala.com.
Come puoi vedere il suo sito in versione mobile presenta due navigazioni, una superiore con logo e hamburger menu e una inferiore con un menu sticky con 4 voci di menu: home, rappresentata da un’icona parlante, servizi, risorse, contatti e l’icona che punta al suo profilo Linkedin.
Se hai un sito web e vuoi sfruttarlo al massimo, o semplicemente vuoi inserire una barra di navigazione nuova nella thumb zone, contattami
sei interessato al mondo del web design?
Tutti gli iscritti alla mia newsletter riceveranno il mio nuovissimo ebook!
L’articolo continua dopo il form newsletter
ti interessa il web design?
Iscriviti subito alla Newsletter!
