Questo articolo è un po’ controverso, nel senso che sono sicuro che avrà un effetto polarizzante e una grossa fetta delle persone che lo leggeranno, saranno CONTRO questo articolo (perché lo giudicheranno dal punto di vista sbagliato). Questo mi fermerà dal pubblicarlo? Assolutamente no. Quindi ecco come mai quello che ti hanno insegnato sul design è SBAGLIATO e come rimediare.

Nel momento in cui scrivo non ho ancora verificato, ma posso farti una promessa: prenderò i primi 10 siti premiati su CSS Awards appartenenti a qualsiasi categoria (eCommerce, istituzionale, blog, ecc..) e ti dimostrerò, dati alla mano, che fanno TUTTI lo stesso errore BANALE ma molto grave nella progettazione di un particolare pezzo di un sito web e ti spiegherò anche da dove deriva questo errore e perché non devi più farlo.

L’errore che stanno commettendo tutti nel mondo

Sembrerà strano, ma TUTTI i designer stanno facendo il clamoroso errore di utilizzare MALE l’area a loro disposizione quando si tratta di disegnare la grafica per gli smartphone. Ora ti chiedo di fare questo semplice esercizio:

  1. prendi il tuo smartphone con la mano preferita come faresti normalmente (nel mio caso, la destra)
  2. utilizza il pollice come fosse un tergicristallo, muovendolo sullo schermo

quella che vedi è l’area dove il pollice arriva agevolmente, con facilità. Noti qualcosa?

In quest’area rimangono fuori alcune zone dello schermo dove il pollice non arriva. Ma ok, possiamo fare di meglio e sforzarci un po’ di più. Prova a rifare l’operazione precedente, allungando di più il pollice. Cosa noti, questa volta?

Hai coperto un’area maggiore, ma rimangono comunque alcuni punti dello schermo che non riesci a raggiungere, tenendo lo smartphone con una sola mano. Stiamo parlando di schermi sullo standard attuale che è quello dell’iPhone 6 (su schermi più grandi, come iPhone 6plus e molti Samsung, la situazione non fa che peggiorare).

Ecco un’immagine che indica le aree facilmente raggiungibili dalle persone con una grandezza normale delle mani e delle dita.

holdphones_figure-2

In particolare, rimangono tre aree fuori dal controllo del nostro pollice:

  1. in alto a sinistra
  2. in alto a destra
  3. in basso a destra

Sono le tre aree che meno sono raggiungibili e che puoi toccare solo tenendo lo smartphone con due mani facendo comunque molta fatica. Il problema è che tipicamente gli utilizzatori di smartphone lo utilizzano nei momenti liberi (o anche non liberi) come:

  • in auto al semaforo
  • mentre camminiamo
  • in autobus/metro/mezzi di trasporto
  • in ufficio mentre facciamo altro

Insomma, difficilmente noi usiamo lo smartphone dedicandoci al 100% a questo strumento.

Come tieni lo smartphone?

Se sei come la maggior parte delle persone (cosa molto probabile statisticamente) la maggior parte del tempo tieni lo smartphone come nell’immagine seguente.

right-hand

Infatti, secondo uno studio effettuato da uxmatters.com/, ben il 49% delle persone, quindi un utente su due, tiene lo smartphone con una sola mano, il 36% lo tiene con due mani ma lo usa come fosse una mano sola (cioè continua a usare il pollice per fare le operazioni di tapping e usa la mano secondaria solo come supporto per reggere in maniera più affidabile il tenefono), come nell’immagine seguente:

holdphones_figure-3

e solamente il 15% lo tiene con due mani.

A questo punto potresti pensare che chi tiene lo smartphone con entrambe le mani, non abbia problemi a raggiungere tutte le aree. Sbagliato! Anche con due mani, secondo lo studio, tutta la parte in alto dello schermo è difficile da raggiungere, quando viene tenuto in verticale, cioè in portrait mode. Questa problematica sparisce quando viene utilizzato in orizzontale, cioè in landscape, come puoi vedere da questa immagine:

holdphones_figure-4

L’errore clamoroso di tutti gli attuali siti che anche tu stai commettendo

Probabilmente avrai già capito a cosa mi riferisco e ora ti svelo il trucco: i menu di navigazione (in particolare i burger menu o i vari menu secondari) sono TUTTI in alto a sinistra o in alto a destra. Esattamente nell’area meno utilizzabile.

Prendiamo i primi dieci siti di Css Awards e vediamo cosa fanno loro. Li ho presi assolutamente a caso: sono nella sezione dei premiati e ho preso i primi dieci, non li ho assolutamente selezionati.

1) https://www.mozaik.com/

Posizione menu: in alto a destra. Esito: KO

https://www.mozaik.com/

2) http://vallierbistro.com/en/

Posizione menu: in alto a sinistra. Esito: KO

Vallier

3) https://uzuz.jp/

Posizione menu: in alto a destra. Esito: KO

Uzuz

4) https://www.reputationsquad.com/

Posizione menu: in alto a destra. Esito: KO

Reputation

5) http://valaire.mu/

Posizione menu: in alto a destra. Esito: KO

Valaire

6) http://www.buildinamsterdam.com/cases

Posizione menu: in alto a destra. Esito: KO

Built in Amsterdam

7) https://www.plantflags.com/en/

Posizione menu: in alto al centro, quasi a destra. Esito: KO

schermata-2016-12-07-alle-23-17-34

8) https://predictiveworld.watchdogs.com/it/

Posizione menu: nessuna. Navigando, però, i pulsanti sono al centro dello schermo. Esito: OK! 🙂

Predictive software

9) http://mobile.anonymoushamburger.com/

Posizione menu: in alto a sinistra e destra. Esito: KO

schermata-2016-12-07-alle-23-23-35

10) https://www.sequence.co.uk/

Posizione menu: in alto a destra. Esito: KO

schermata-2016-12-07-alle-23-24-08

Conclusioni

Come vedi, 9 siti su 10 hanno lo stesso problema e l’unico sito che non soffre dl problema è anche quello che NON ha un menu di navigazione. Ma allora dove mettiamo questo menu?

Possibilmente, va inserito in basso a sinistra, che è la zona più sicura in assoluto in qualsiasi modalità l’utente utilizzi lo smartphone. Ti garantisce che la call to action sia sempre raggiungibile.

Quindi, se hai pulsanti importanti con cui deve interagire l’utente, questa è la zona adatta.

La zona in alto non va quindi usata? Si, va usata assolutamente! In alto e in generale tutte le zone difficilmente raggiungibili, sono utilissime per inserire testo, immagini, video e tutti quegli elementi che hanno uno scopo puramente informativo: fanno cioè vedere qualcosa con cui l’utente non deve però interagire (e quindi usare il pollice).

Quindi queste zone sono e rimangono valide, a patto che non sia necessario raggiungerle con il dito per tappare delle call to action.