Come progettare per un'ottima UX mobile

Come progettare per un'ottima UX mobile deve essere in prima linea in tutto ciò che la tua azienda fa sul Web. A meno che tu non progetti prima di tutto pensando ai dispositivi mobili, la tua attività non avrà il successo che potrebbe e dovrebbe. Il motivo è semplice: il mobile ha da tempo superato il desktop come metodo numero uno per accedere a Internet. In altre parole, non riuscire a progettare per i dispositivi mobili... non riuscire a ottenere il maggior numero possibile di visitatori del sito, lead e clienti.

Diamo un'occhiata alle statistiche.

Secondo Smart Insights, abbiamo superato il punto in cui il numero di utenti mobili ha superato il numero di utenti desktop. Questo punto di svolta si è verificato nel 2014. Da allora, il numero di utenti mobili globali ha continuato a crescere in modo aggressivo mentre il numero di utenti desktop è aumentato meno rapidamente.

La conclusione: più lead, visitatori e clienti atterreranno sul tuo sito Web sui loro telefoni cellulari, non sui loro desktop.

Se vuoi massimizzare le tue conversioni, il tuo sito deve essere prima ottimizzato per i dispositivi mobili. Oggi, un'ottima UX mobile è anche un marketing mobile di successo.

Diamo un'occhiata.

Come progettare per un'ottima UX mobile: cosa dicono le statistiche

Ogni volta che vuoi stabilire un solido caso d'uso per giustificare la spesa nella tua attività, ad esempio per il design mobile-first, guarda le statistiche su come e dove le persone acquistano in questi giorni. Vai dove ti portano le prove.

La società tecnologica globale Criteo, specializzata in marketing commerciale, ha rilasciato un comunicato stampa che ha rivelato che le vendite di dispositivi mobili nei soli Stati Uniti ora rappresentano il 52% di tutte le transazioni di e-commerce. Chiaramente, se vuoi vendere in modo efficace e con successo... hai bisogno di una presenza mobile molto efficiente con un'ottima UX.

Ecco un'altra statistica molto interessante che in realtà rivela più di quello che sembra, a prima vista.

Secondo il Mobile Retail Report di Adobe, le conversioni sono 2,8 volte superiori su desktop che su dispositivi mobili. Se ritieni che questo significhi che non è importante ottimizzare per i dispositivi mobili, ripensaci. Questo è in realtà un motivo in più per impegnarsi in una strategia mobile-first, soprattutto perché i dispositivi mobili rappresentano ancora più traffico rispetto ai desktop.

Il motivo per cui le conversioni sono più elevate su desktop è probabilmente dovuto al fatto che le esperienze mobili non sono ottimizzate come dovrebbero, non perché le persone non preferiscano fare acquisti e convertire su dispositivi mobili, dove è più conveniente per loro in primo luogo !

Immagina uno scenario in cui il tuo sito mobile è perfettamente ottimizzato, riceve più traffico del tuo sito desktop e vede più conversioni rispetto al desktop, tutto perché hai implementato un'ottima UX mobile.

È alla tua portata. Ecco cosa fare.

Design per i pollici... ma non principalmente per i pollici

L'usabilità mobile dovrebbe basarsi su tutti i vari modi in cui le persone interagiscono con i propri smartphone. Come progettare per un'ottima UX mobile è tanto buon senso quanto basato sull'evidenza.

Si è tentati di presumere che, se utilizzo il mio smartphone per navigare e fare acquisti su un sito mobile, sia più conveniente per me farlo semplicemente tenendo il telefono in una mano e usando il pollice sulla stessa mano per soddisfare il mio utente obiettivi. È ugualmente allettante presumere che sarebbe meno conveniente per me usare entrambe le mani (telefono in una mano e uso del dito indice dell'altra mano per raggiungere i miei obiettivi di utente).

Tuttavia, questa saggezza convenzionale è in realtà sbagliata perché presuppone che le persone utilizzino solo o principalmente una mano per azionare i loro telefoni.

La ricerca mostra che in realtà ci sono sei modi distinti in cui le persone tengono e interagiscono con i loro telefoni. Qualsiasi sito mobile che non riesce a progettare per tutti e sei i modi fallirà e sperimenterà tassi di conversione inferiori perché l'UX ne risentirà.

I sei modi sono:

• Cullato (una mano sostiene il telefono mentre il pollice dell'altra mano tocca)
• Tieni premuto e tocca (una mano sostiene il telefono mentre il dito indice dell'altra mano tocca)
• Due mani per l'orientamento orizzontale (pensa a come tieni un dispositivo di gioco portatile come il Nintendo 2DS XL)
• Una mano - primo ordine (una mano tiene il telefono mentre il pollice della stessa mano tocca)
• Una mano - secondo ordine (una mano tiene il telefono mentre il pollice della stessa mano tocca, ma da una posizione iniziale più alta)
• Due mani per l'orientamento verticale (pensa a come tenere un dispositivo di gioco portatile, questa volta, come il vecchio Nintendo Gameboy)

Ora, ed è qui che le cose diventano davvero rilevanti, ecco i diversi casi d'uso per i vari modi in cui puoi tenere un telefono:

• Toccando i collegamenti: la maggior parte delle volte tieni premuto e tocca o culla
• Caselle di controllo: la maggior parte dei cradle o tenere premuto e toccare
• Digitazione: la maggior parte usa due dita o pollici contemporaneamente oppure tieni premuto e tocca
• Scorrimento breve: la maggior parte tieni premuto e tocca o culla
• Scorrimento più lungo: la maggior parte dei supporti o tieni premuto e tocca

In conclusione: progetta il tuo sito per dispositivi mobili in modo che soddisfi la gamma di questi diversi modi in cui le persone tengono i loro telefoni.

I pulsanti più grandi sono migliori

Se stai pensando a come progettare per un'ottima UX mobile, uno degli aspetti più vitali su cui concentrarti è la dimensione dei pulsanti. Come per tutti i dispositivi mobili, le dimensioni dello schermo sono molto inferiori rispetto a tablet o desktop, compromettendo così l'usabilità del tuo sito mobile se i pulsanti sono troppo piccoli. I pulsanti di dimensioni inadeguate portano a errori UX come:

• Difficoltà a toccare correttamente i pulsanti
• Problemi con la visualizzazione dei pulsanti in primo luogo
• Avere difficoltà a capire che un pulsante può essere toccato o altrimenti interagito

Err dal lato del più grande è meglio.

I pulsanti più grandi garantiscono un'esperienza utente più fluida per i tuoi acquirenti, clienti, visitatori, ecc.

Questo pone la domanda, quanto è grande, esattamente?

Secondo le linee guida sulla dimensione target del tocco di design del materiale di Google, i pulsanti mobili dovrebbero raggiungere una dimensione del touchscreen compresa tra 7 e 10 millimetri. In altre parole, i pulsanti dovrebbero possedere una dimensione fisica di circa 1 centimetro, indipendentemente dallo schermo su cui appaiono. Ciò garantisce un ottimo equilibrio tra:

• Densità di informazioni
• “Targetability” degli elementi dell'interfaccia utente

Quando i tuoi utenti possono vedere più facilmente i pulsanti, capire la loro relazione spaziale con altri elementi sullo schermo e toccarli per completare con successo gli obiettivi della pagina, allora offri loro un'esperienza utente straordinaria.

Dai la priorità ai contenuti più importanti

La risposta alla domanda, come progettare per un'ottima UX mobile? a volte sta in ciò che sottrarre invece di aggiungere. Nel caso di contenuti su schermo, questa regola si applica al 100%.

La benedizione degli smartphone è la loro dimensione piccola e portatile, nonostante la recente tendenza ad aumentare le dimensioni dello schermo mobile. Questa comodità ha uno svantaggio, ovvero che gli utenti sono soggetti a un costo di interazione maggiore. Questo è lo sforzo fisico e mentale che devono spendere per raggiungere i loro obiettivi di sito mobile.

Ad esempio, se navighi in un sito di notizie sul desktop, probabilmente sarai in grado di vedere sulla home page i risultati sportivi e le previsioni del tempo nelle barre laterali above the fold, quindi non devi preoccuparti di scorrere verso il basso. Sui dispositivi mobili, tuttavia, questo stesso contenuto richiederebbe probabilmente uno scorrimento serio da raggiungere perché lo spazio è prezioso sui dispositivi mobili.

Pertanto, l'unica soluzione è dare la priorità ai contenuti più importanti above the fold sui dispositivi mobili. In altre parole, pensa attentamente a quali contenuti mostrare ai tuoi utenti e visitatori above the fold sulle tue pagine mobili. Dopotutto, per ogni elemento di contenuto che includi above the fold, un altro elemento deve essere spinto verso il basso e persino sacrificato below the fold.

Un approccio per aiutarti a massimizzare il contenuto mobile above the fold è ridurre al minimo il cosiddetto Chrome. Non stiamo parlando del browser di Google in questo caso. Chrome è la raccolta di elementi di progettazione visiva che aiutano gli utenti a interagire o forniscono informazioni aggiuntive sul contenuto di un'interfaccia, ma non fanno parte del contenuto. Chrome proviene dal sistema operativo del telefono cellulare.

Un esempio di Chrome potrebbe essere tutte le immagini associate agli account delle persone quando visualizzi le email nella posta in arrivo della tua app Gmail. In questo esempio, queste immagini ti aiutano a identificare ulteriormente i tuoi mittenti, ma non sono assolutamente essenziali per identificarli (la riga Da nell'e-mail stessa sarebbe sufficiente).

Riducendo questi elementi cromati, risparmi notevolmente lo spazio sullo schermo mobile e quindi hai maggiori possibilità di mettere le informazioni più vitali sopra la piccola area di piegatura.

Concentrati sull'utente finale

Il segreto su come progettare per un'ottima UX mobile dipende sempre dall'utente finale. Tienilo a mente quando progetti i tuoi siti per dispositivi mobili e creerai un sito facile da usare. È così semplice.

Per arrivarci, assicurati di progettare sulla base di dati reali e non di ipotesi. Un ottimo punto di partenza è innanzitutto il modo in cui i tuoi utenti tengono i loro telefoni. Se stai progettando un modo in cui molte persone non tengono nemmeno in mano i loro telefoni, allora tutte le scommesse sono annullate.

È fondamentale anche ricordare che, a causa dei piccoli schermi dei dispositivi mobili, i contenuti devono essere visualizzati facilmente e rapidamente, quindi ingrandisci gli elementi e assicurati che i contenuti più importanti vivano above the fold.