Come puoi rendere il tuo sito web un'esperienza piacevole per l'uso mobile? Cosa significa esperienza utente per i dispositivi mobili? Quali principi di design puoi applicare? Troverai le risposte a tutte queste domande in questo post. Diamo un'occhiata più da vicino alle migliori pratiche per il mobile UX design!

Perché il Mobile UX Design?

Movimenti di design come il " mobile first" hanno cercato di spostare la nostra attenzione verso il mobile per un po' di tempo. Ormai la maggior parte dei siti web professionali funziona bene sui dispositivi mobili. Naturalmente, i designer coscienziosi contribuiscono a questo risultato. Ma anche chi gestisce un sito web WordPress spesso utilizza framework come Bootstrap o temi WordPress già pronti. In questo caso, il display responsive è solitamente già integrato. Questo fa risparmiare agli sviluppatori un'incredibile quantità di tempo. 

Tuttavia, l'uso di Bootstrap, WordPress Themes & Co. comporta il rischio che il design sia progettato per il desktop - e poi adattato solo per i dispositivi mobili.

Perché è un problema? I visitatori che visualizzano il tuo sito WordPress tramite dispositivi mobili hanno altre esigenze che non sono necessariamente soddisfatte dalla sola personalizzazione estetica e tecnica del sito WordPress.

Il design dell'esperienza utente si basa sulla risoluzione dei problemi. La domanda di partenza è sempre: quali problemi possono avere gli utenti e come possiamo risolverli? Nel contesto dei dispositivi mobili, devi considerare una domanda centrale: Quali altri problemi si presentano quando gli utenti visitano il tuo sito WordPress da un dispositivo mobile?

Molti di noi usano lo smartphone soprattutto quando sono in movimento. L'esperienza dell'utente è fortemente influenzata da fattori esterni: può essere rumorosa intorno a noi. Potremmo anche essere in movimento: l'interazione con il telefono è meno accurata. I livelli di luce possono cambiare rapidamente tra la luminosità e la penombra. La ricezione può variare da buona a cattiva, o addirittura interrompersi del tutto. I visitatori del tuo sito WordPress potrebbero avere un piano prepagato, quindi cerca di evitare i siti che utilizzano molti dati in poco tempo.

La posizione può essere meno comoda e gli utenti meno rilassati. In genere abbiamo meno pazienza perché abbiamo meno tempo per i singoli compiti. Se qualcosa non funziona nel più breve tempo possibile - o se dobbiamo aspettare troppo a lungo per il caricamento dei contenuti - tendiamo a cancellare il processo sullo smartphone e a dedicare la nostra breve attenzione a un altro sito WordPress.

Anche la voglia di leggere o scorrere molto testo è minore. Cerchiamo informazioni chiaramente strutturate in piccoli bocconi. Potremmo anche avere una sola mano libera.

Le ragioni per navigare in Internet con uno smartphone sono molto diverse da quelle degli utenti desktop: Su mobile, vogliamo cercare informazioni specifiche o cercare di ammazzare il tempo. 

Quando navigo su un sito web commerciale dal mio smartphone, sono probabilmente più interessato alle informazioni di base:

• Qual è l'indirizzo?
• Come ci si arriva?
• Quali sono gli orari di apertura?
• Come posso mettermi in contatto con te?
• Quali sono i prodotti offerti?
• Quali sono i prezzi?

L'unica domanda che rimane è: il tuo sito web WordPress è ottimizzato per i dispositivi mobili? Per riassumere meglio cosa significa nel dettaglio, ho riassunto i principi UX più importanti per il design dei dispositivi mobili.

13 Principi di design UX per dispositivi mobili

1. Contenuti

I visitatori del tuo sito web hanno obiettivi diversi a seconda dei dispositivi che utilizzano per accedervi. I testi lunghi sui dispositivi mobili spesso comportano un lungo scorrimento per trovare ciò che si cerca. Come utenti mobili, cerchiamo soprattutto informazioni rapide e concise. Chi visita il tuo negozio su dispositivi mobili è più propenso a conoscere i prodotti che offri piuttosto che a saperne di più sul tuo background.

Il contenuto deve quindi essere adattato. Sullo smartphone e sul tablet c'è una gerarchia diversa rispetto al desktop. Ci sono diverse possibilità qui:

• Ometti completamente il contenuto: Per alcuni contenuti, potrebbe essere una buona idea nasconderli completamente. Questo potrebbe essere il caso se si tratta di qualcosa che non funziona comunque sul telefono. Oppure se il volume di dati consumato supera i vantaggi per l'utente.
• Accorciare i contenuti: puoi mantenere la struttura del tuo sito WordPress così com'è, ma accorciare di conseguenza i contenuti lunghi e collegarli, ad esempio, a una sottopagina. In questo modo, i visitatori possono decidere da soli se queste informazioni sono rilevanti o meno per loro.
• Cambia la disposizione dei tuoi contenuti: Puoi rivedere la struttura del tuo contenuto e organizzarlo in modo diverso sui dispositivi mobili. I prodotti potrebbero quindi essere al primo posto e gli sfondi del negozio vengono dopo. In questo modo si risparmia lo scorrimento inutile, ma si mostra comunque tutto il contenuto.

Nell'esempio seguente, ho adattato il contenuto del sito web di un ristorante (a sinistra) per renderlo più amichevole. Ho accorciato il testo e collegato a una sottopagina con una CTA (a destra). Ho anche aggiustato la tipografia, ma ne parleremo più tardi.

2. layout

Nel suo articolo Design for Fingers, Touch, and People, Steven Hoober riporta i risultati della sua vasta ricerca sull'uso degli smartphone. La tecnica del pollice viene spesso utilizzata come guida. In questo caso, conta il raggio che il pollice può compiere attraverso lo schermo. Spesso si suggerisce che gli angoli superiori siano zone assolutamente tabù che gli utenti non possono raggiungere. Secondo i risultati della sua ricerca, però, questo non è del tutto vero.

I 6 modi più comuni in cui si tengono gli smartphone:

Questo porta alla seguente divisione ottimale degli elementi per gli smartphone:

Il risultato: le informazioni più importanti dovrebbero essere posizionate al centro dello schermo sui dispositivi mobili.

3. minimalismo

Un approccio minimalista al design non è mai sbagliato. Ma soprattutto su un dispositivo più piccolo, ci sentiamo stretti e confusi da troppo contenuto e troppo poco spazio bianco. Diventa poco chiaro dove si nascondono le informazioni e come ci si arriva.

La versione mobile di Streetartnews appare strutturata e chiara. Nelle pagine di contenuto ci sono solo gli elementi più necessari e un font serif ben leggibile con un'interlinea appropriata:

4. coerenza

È importante che il tuo sito web sia coerente tra le varie piattaforme. Google ha risolto questo problema in modo molto elegante. Non importa da quale dispositivo accedo a Google: riconosco immediatamente il marchio Google.

Il tuo marchio dovrebbe quindi riflettersi sui dispositivi mobili nonostante il tuo design minimalista. Se il tuo sito ha un'area utente, le modifiche apportate devono essere adottate di conseguenza su tutti i dispositivi.

5. media

Le immagini devono avere una dimensione adeguata e devono essere visualizzate in tale dimensione, in modo che non debbano essere distorte o ridimensionate. Questo aiuta anche a evitare tempi di caricamento inutilmente lunghi. Il passaggio dal formato orizzontale a quello verticale può essere il più difficile: A seconda del contenuto dell'immagine, dovresti mostrare solo una parte dell'immagine o salvare le immagini per i dispositivi mobili. Per i siti web con molte immagini, dovresti integrare il Lazy Load o utilizzare i plugin WordPress appropriati. 

Lo stesso vale per i video. Anche qui, passa da Paesaggio a Ritratto. I video dovrebbero anche essere impostati per funzionare in muto e non partire da soli. I video dovrebbero generalmente essere ottimizzati per il web, ma questo è particolarmente importante per i dispositivi mobili.

6. tipografia

Più importante dell'aspetto del tuo sito web è sempre la sua funzionalità. Questo include un testo leggibile. La dimensione predefinita del testo in HTML è 16px. Questa dimensione è usata a meno che non si specifichi altrimenti. A seconda del carattere, tuttavia, il tuo testo può apparire più grande o più piccolo. 

Per rendere la tipografia più leggibile, però, ci sono alcuni altri aspetti da considerare:

• Contrasto tra il colore dei caratteri e lo sfondo: soprattutto perché i dispositivi mobili vengono utilizzati anche all'aperto, questo aspetto è particolarmente importante. Questo vale anche per il resto del tuo sito web. Un buon contrasto tra gli elementi rende più facile la visualizzazione del tuo sito web. ContrastChecker.com analizza la tua scelta cromatica e ti dice se i colori combinati hanno un contrasto sufficiente tra loro.
• Spaziatura: se il testo è troppo ravvicinato, diventa sempre più difficile da leggere. L'interlinea dei dispositivi desktop e mobili può essere diversa.
• Centratura: la mia regola di base è di non usare mai la giustificazione nei siti web. La giustificazione può sembrare bella a prima vista, ma fa sì che il flusso di lettura venga interrotto. Il tipo centrato ha un effetto simile. Le sezioni di testo sui dispositivi mobili dovrebbero quindi essere centrate solo in casi particolari.

Ecco di nuovo l'esempio di EggShop: per rendere il testo (a sinistra) più leggibile, ho aumentato la dimensione del carattere a 16px e impostato l'altezza della linea a 1,7 (a destra). Ho anche centrato il testo a sinistra e ridotto un po' di spaziatura verso l'alto, rispettivamente ho tolto la doppia intestazione. Nella versione desktop, il doppio titolo ha senso. Su mobile crea solo spazi bianchi indesiderati e duplicazioni. 

Potresti andare un po' oltre e rendere le parole chiave in grassetto. In questo modo gli utenti potranno sfogliare il testo ancora più velocemente, cogliendo comunque le informazioni rilevanti. Alcuni font non sono generalmente adatti agli schermi piccoli perché perdono la loro leggibilità quando vengono ridimensionati. I font leggeri che sembrano eleganti su un desktop possono essere meno leggibili su uno smartphone.

7. navigazione

La navigazione del tuo sito web deve essere il più intuitiva possibile. Ciò significa che quando crei la tua architettura di navigazione, è meglio usare le strutture esistenti come guida. In questo modo gli utenti potranno navigare più facilmente nel tuo sito web. Intuitivo è, ad esempio, scorrere verso il basso e verso l'alto per navigare in un sito web, ma non necessariamente verso destra o sinistra.

Il menù verticale ha prevalso come menù principale su mobile. Ma anche sul desktop vediamo sempre più spesso un menù verticale invece di uno orizzontale. Sopra o sotto di esso si trova di solito il menù secondario, se necessario in modo un po' meno evidente. In alternativa, può anche trovarsi in basso. 

I menù secondari possono essere, per esempio, le impostazioni della lingua o i collegamenti ai social media. Se un menù terziario è necessario, sarà posto come un menù pieghevole. Questo può essere un login o un logout, per esempio.

Se il tuo sito web è più di un one-pager, è particolarmente importante che i visitatori possano sempre trovare facilmente la loro posizione.

CTA e link

Gli elementi interattivi dovrebbero essere visualizzati in dimensioni maggiori. In questo modo, i visitatori del tuo sito web sanno cosa possono fare sul tuo sito. E possono cliccare su ciò che vogliono. Anche la disposizione degli elementi gioca un ruolo importante. È necessario lasciare uno spazio sufficiente per ridurre il rischio di toccare accidentalmente il link o il pulsante sbagliato. Anche i pulsanti come "Esci", "Elimina", "Invia" devono essere posizionati a una certa distanza dalle altre call-to-action in modo da non essere attivati accidentalmente.

Interazione nascosta

È abbastanza comune permettere interazioni attraverso percorsi multipli. Purché ci sia un modo per i nuovi visitatori di utilizzare ancora il tuo sito. Questo permette di offrire scorciatoie agli utenti che ritornano senza rendere difficile l'inizio.

Collegamenti

Se volete aggiungere più funzionalità al vostro sito web, ha senso usare i sistemi esistenti - invece di programmarne di nuovi. Questo è vero, per esempio, se il client di posta elettronica dell'utente è usato al posto di un modulo di contatto. O quando si integrano le indicazioni attraverso l'app preferita dell'utente. Questo rende più facile per loro l'uso del tuo sito web, in quanto possono usare le applicazioni che hanno già imparato per realizzare certi compiti.

8. Modelli di progettazione dell'interfaccia utente

Come per i desktop, anche per la creazione del tuo sito web o del tuo negozio di e-commerce è bene utilizzare soluzioni collaudate, chiamate anche modelli di design dell'interfaccia utente. Alcuni di questi modelli sono trasversali ai dispositivi, altri sono più specifici. Inoltre, questo e-book di UXPin si è rivelato un buon punto di riferimento.

I piccoli schermi in particolare offrono poco spazio per la navigazione. I siti web destrutturati e confusi sono particolarmente evidenti.

Come per gli UI Design Patterns, è consigliabile orientarsi su siti web già esistenti e applicazioni web di successo e analizzarli:

• Dove si trova di solito il menù?
• Che aspetto ha?
• Cosa succede quando lo premo? 

Tuttavia, devi procedere in modo critico per non copiare eventuali errori o elementi UX "cattivi". 

9. moduli

I moduli lunghi possono essere faticosi e possono creare rapidamente confusione. In generale, dovresti utilizzare i moduli sui dispositivi mobili solo se necessario. Quando integri i moduli, devi assicurarti di richiedere solo i dati effettivamente necessari e di fornire all'utente la tastiera appropriata. Puoi farlo utilizzando i tipi di modulo HTML adatti. Questo indica al browser quale sia l'input. E viene fornita la tastiera appropriata.

In alternativa, è possibile integrare il riempimento automatico o il suggerimento di contenuti. Oppure usa il login dei social media invece di un lungo processo di registrazione.

10. feedback

Dal momento che usiamo i dispositivi mobili con le mani, tendiamo ad aspettarci di ottenere un feedback reale: un feedback basato su oggetti reali. Questo può essere, per esempio, un pulsante che sembra essere premuto quando lo premiamo.

Se questo tipo di feedback non rientra nel tuo concetto, è comunque importante fornire un feedback. A chi non è mai capitato di premere un link o un pulsante per molte volte di seguito e di non essere sicuro che non funzioni o che la connessione a internet sia saltata. È una cosa da evitare. Esistono trucchi comuni per questo, come il caricamento delle animazioni. È importante che gli utenti sappiano che la loro interazione ha funzionato e che succederà qualcosa.

11. gestione degli errori

Si commettono errori. Si colpisce accidentalmente il link sbagliato e si finisce sul sito web sbagliato. O si presenta qualcosa che non era ancora pronto. È importante che gli errori non abbiano (o il meno possibile) conseguenze negative. Le funzioni di annullamento e i pulsanti indietro sono buoni per questo. Il pulsante home è anche incredibilmente importante qui: l'ancora se i tuoi utenti si perdono. Così sanno sempre come tornare alla home page.

12. velocità

Il tempo di caricamento del tuo sito web può essere un problema anche sui dispositivi mobili. Soprattutto se vuoi accedere da reti instabili, il tempo di attesa non deve essere così lungo da scoraggiare i visitatori.

13 Accessibilità

L'accessibilità è un argomento multipiattaforma che sta finalmente guadagnando sempre più importanza. L'idea di base e la missione: il web deve essere accessibile a tutte le persone. Questo è particolarmente rilevante per le persone con tali disabilità che possono influenzare il modo in cui le persone accedono e utilizzano il web.

Se ignorate la questione dell'accessibilità, state già escludendo il 20% della popolazione mondiale dal poter utilizzare il vostro sito web oggi. In breve, trascurare l'accessibilità non fa bene al vostro business. Ma soprattutto, è terribile per creare un mondo più giusto ed equo.

Strumenti per i test UX

A seconda di come è costruito il tuo sito web, potresti avere un modo per modificare direttamente la vista mobile. Di regola, sono necessari alcuni aggiustamenti manuali del CSS. Diverse possibilità sono adatte per i test:

• Strumenti di ispezione nel browser: I browser più comuni ti permettono di ispezionare il tuo sito web con i cosiddetti Strumenti per sviluppatori. Qui puoi anche controllare il tuo sito web con dispositivi di diverse dimensioni. Altri buoni strumenti per testare i siti web sono Responsinator e BrowserStack Responsive.

• Nel dispositivo: Il modo più efficace per vedere il tuo sito web è nel dispositivo stesso. I test sul proprio cellulare o tablet non dovrebbero quindi mai mancare. Dato che sarebbe molto costoso possedere ogni dispositivo a casa, ci sono i cosiddetti emulatori.
• Emulatori: Questo software è fornito dal produttore stesso del sistema operativo. Lì puoi sviluppare e vedere i tuoi risultati direttamente nel browser - adattati alle dimensioni del dispositivo e al rispettivo sistema operativo come Android o iOS.

Conclusioni sul Mobile UX Design

Implementando questi consigli, puoi rendere la tua esperienza mobile migliore e attrarre più clienti. E forse gli esempi e le migliori pratiche vi aiuteranno a sviluppare nuove idee per il vostro sito web. Purtroppo, il design mobile è ancora spesso trascurato in un sito web - il che ha un impatto negativo sul tasso di conversione degli utenti mobili.

Per ulteriori informazioni sulla progettazione UX per i dispositivi mobili, ti consiglio vivamente i Fondamenti del Web di Google e questo articolo per una migliore progettazione UX per i dispositivi mobili.