Mobile UX Design: a cosa dovresti prestare attenzione quando ottimizzi il tuo sito web per il mobile

12 Min.
Migliori pratiche di design UX mobile

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é proprio il Mobile UX Design?

Movimenti di design come Mobile First hanno cercato di spostare la nostra attenzione verso il mobile per qualche tempo. Ormai la maggior parte dei siti web professionali funziona bene sui dispositivi mobili. Naturalmente, i progettisti coscienziosi contribuiscono a questo. Ma anche chi gestisce un sito web usa spesso framework come Bootstrap o prefabbricati WordPress Themes . Qui, il display reattivo è di solito già integrato. Questo fa risparmiare agli sviluppatori una quantità incredibile 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é questo è un problema? I visitatori che visualizzano il tuo sito web tramite dispositivi mobili hanno altre esigenze che non sono necessariamente soddisfatte dal solo adattamento estetico e tecnico del sito web.

Ildesign dell'esperienza utente si basa sulla risoluzione dei problemi. La domanda iniziale qui è sempre: quali problemi possono avere gli utenti e come li risolviamo? Quindi, nel contesto dei dispositivi mobili, si dovrebbe considerare una domanda chiave: Quali problemi aggiuntivi sorgono quando gli utenti visitano il tuo sito web da un dispositivo mobile?

Uso dello smartphone in Germania

Secondo Statista.com, il 97,5% delle famiglie in Germania aveva uno o più telefoni cellulari nel 2020. Questo si traduce in una quota dell'80% degli utenti di Internet mobile. Di questi, il 24,1% ha usato un contratto prepagato. Per il 2023, si prevede un aumento da 66,5 milioni di utenti di smartphone a 68,6 milioni.

Molti di noi usano i nostri smartphone soprattutto in movimento. L'esperienza dell'utente è fortemente influenzata da fattori esterni: può essere rumoroso intorno a noi. Possiamo anche essere in movimento - l'interazione con il telefono è meno accurata. I livelli di luce possono cambiare rapidamente tra molto luminoso e molto scuro. La ricezione può cambiare tra il bene e il male, o addirittura fermarsi del tutto. I visitatori del tuo sito possono essere su piani prepagati, quindi cerca di evitare i siti che utilizzano molti dati in poco tempo.

La posizione può essere meno comoda e i vostri utenti meno rilassati di conseguenza. In genere abbiamo meno pazienza perché abbiamo meno tempo per i compiti individuali. Se qualcosa non funziona nel minor tempo possibile - o dobbiamo aspettare troppo a lungo il caricamento del contenuto - tendiamo a cancellare il processo sullo smartphone e a dedicare la nostra breve attenzione a un altro sito web.

Anche la volontà di leggere o scorrere un sacco di testo è minore. Cerchiamo informazioni chiaramente strutturate in piccoli morsi. Possiamo anche avere solo una 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 arrivo?
  • Quali sono gli orari di apertura?
  • Come posso mettermi in contatto?
  • Quali prodotti sono offerti?
  • Quali sono i prezzi?

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

Mobile UX Design: 13 principi da implementare immediatamente

1. contenuto

I visitatori del tuo sito web hanno obiettivi diversi a seconda dei dispositivi che usano per accedere al tuo sito. I testi lunghi sui dispositivi mobili spesso significano un sacco di scorrimento per trovare ciò per cui sono venuti. Come utenti mobili, cerchiamo informazioni rapide e concise. Chi visita il tuo negozio su mobile è più probabile che voglia sapere quali prodotti offri, piuttosto che 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:

  • Omettere completamente il contenuto: Per alcuni contenuti, può essere una buona idea nasconderli completamente. Questo può essere il caso se si tratta di qualcosa che non funziona comunque sul telefono. O se il volume di dati consumato supererebbe il beneficio per l'utente.
  • Accorciare il contenuto: puoi riprendere la struttura del tuo sito web, ma accorciare di conseguenza i contenuti lunghi e collegarli a una sottopagina, per esempio. In questo modo, i visitatori possono decidere da soli se queste informazioni sono rilevanti per loro o no.
  • 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.

Migliori pratiche di design UX mobile
Versione mobile originale di un sito web di esempio
Migliori pratiche di design UX mobile
Versione mobile ottimizzata di un sito web di esempio

2. disposizione

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 è spesso usata come guida. Qui conta il raggio che il pollice può fare sullo schermo. Si suggerisce spesso che gli angoli superiori sono zone assolutamente tabù che gli utenti non possono raggiungere. Secondo i risultati della sua ricerca, tuttavia, questo non è del tutto vero.

I 6 modi più comuni di tenere gli smartphone:

Migliori pratiche di design UX mobile
Come le persone preferiscono tenere i loro smartphone

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

Migliori pratiche di design UX mobile
Il miglior layout per il contenuto primario, secondario e terziario

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:

Migliori pratiche di design UX mobile
La gerarchia visiva è tanto più importante quando è mobile.
Migliori pratiche di design UX mobile
Un'interlinea più grande è più facile da leggere sui dispositivi mobili.

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.

Migliori pratiche di design UX mobile
La versione desktop di Google
Migliori pratiche di design UX mobile
E questo è l'aspetto di Google sul tablet.
Migliori pratiche di design UX mobile
La versione mobile di Google

Il tuo marchio dovrebbe quindi riflettersi sui dispositivi mobili nonostante il suo 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 adatta e anche essere visualizzate in questa dimensione, in modo che nulla debba essere distorto o scalato. In questo modo si può anche evitare un caricamento inutilmente lungo. La transizione tra il formato orizzontale e verticale può essere la più difficile: A seconda del contenuto dell'immagine, dovresti mostrare solo una parte dell'immagine, o rendere le tue immagini extra per i dispositivi mobili. Per i siti web con molte immagini, si dovrebbe integrare il lazy load o usare il corrispondente WordPress Plugins . 

WordPress Ottimizzare le immagini: 6 Plugins per la compressione delle immagini

Ottimizzare la grafica e le immagini per il tuo sito WordPress è un passo facile e importante per migliorare il tempo di caricamento. Vi mostreremo sei popolari WordPress Plugins , che vi solleveranno completamente dal compito di comprimere le vostre immagini.

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. 

Tutto sulla tipografia e i caratteri web

Come regola generale, una dimensione del carattere di 16px è ideale per il testo del corpo e per l'input di testo sugli smartphone. Per ulteriori informazioni sulla tipografia sul web, controlla il nostro articolo"Come trovare il font perfetto per il tuo sito web" e il post del blog"Type Sizes for Every Device" di UX Matters.

Per rendere la tipografia più leggibile, tuttavia, ci sono alcune altre cose da considerare:

  • Contrasto tra il colore del carattere e lo sfondo: soprattutto perché i dispositivi mobili sono utilizzati anche all'aperto, questo è 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 di colori e ti permette di sapere se i colori combinati hanno abbastanza contrasto tra loro.
  • Spaziatura: se il tuo testo è troppo vicino, diventa sempre più difficile da leggere. L'interlinea per i dispositivi desktop e mobili può essere diversa.
  • Centratura: La mia regola di base è di non usare mai la giustificazione sui siti web. La giustificazione può sembrare bella a prima vista, ma assicura che il flusso della lettura sia interrotto. Il tipo centrato ha un effetto simile. Le sezioni di testo sui dispositivi mobili dovrebbero quindi essere centrate solo in casi speciali.
Migliori pratiche di design UX mobile
Giustificazione su una pagina di esempio
Migliori pratiche di design UX mobile
Testo centrato a sinistra su una pagina di esempio

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. 

Si potrebbe andare un po' oltre e rendere le parole chiave in grassetto. Questo permette agli utenti di scremare il testo ancora più velocemente e di prendere ancora informazioni rilevanti per se stessi. Alcuni font sono generalmente molto inadatti ai piccoli schermi, perché perdono la loro leggibilità quando vengono scalati. Anche i caratteri chiari, che sembrano eleganti sul desktop, possono essere meno leggibili sullo smartphone.

La navigazione del tuo sito web deve essere il più intuitiva possibile. Questo significa che quando si crea la propria architettura di navigazione, è meglio usare le strutture esistenti come guida. Questo rende più facile per gli utenti navigare nel tuo sito web. Intuitivo è, per esempio, scorrere in basso e in alto per navigare in un sito web, ma non necessariamente a sinistra o a destra.

Un menu verticale è diventato il menu principale su mobile. Ma anche sul desktop vediamo sempre più spesso un menu verticale invece di uno orizzontale. Sopra o sotto questo è di solito il menu secondario, se necessario un po' meno prominente. In alternativa, questo può anche essere situato nella parte inferiore. 

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

Se il tuo sito è più di un one-pager, è particolarmente importante che i visitatori possano sempre trovare facilmente dove si trovano.

CTA e link

Migliori pratiche di design UX mobile
La regola del pollice (Fonte: UX Matters)

Gli elementi interattivi dovrebbero essere visualizzati più grandi. In questo modo, i visitatori del tuo sito web sanno cosa possono fare sul tuo sito. E sono in grado di cliccare su ciò che vogliono. Anche la disposizione reciproca gioca un ruolo. Bisogna lasciare abbastanza spazio per ridurre il rischio di toccare accidentalmente il link o il pulsante sbagliato. I pulsanti come "Logout", "Delete", "Submit" dovrebbero anche essere collocati ad una certa distanza dalle altre call-to-action in modo che non vengano attivati accidentalmente.

Migliori pratiche di design UX mobile
Air Inuit visualizza le interazioni in un modo molto chiaro e facile da usare.

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.

Link

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 UI

Come per il desktop, è una buona idea usare soluzioni collaudate, chiamate anche modelli di design UI, quando si costruisce il proprio sito web o negozio di e-commerce. Alcuni di questi modelli sono cross-device, altri sono più specifici. Inoltre, questo e-book di UXPin ha dimostrato di essere 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 menu?
  • Che aspetto ha?
  • Cosa succede quando lo premo? 

Tuttavia, dovreste essere critici nel farlo in modo da non copiare errori o elementi "cattivi" di UX. 

Migliori pratiche di design UX mobile
Crustac.fr ha scelto l'UI Pattern Burger Menu per rendere la navigazione intuitiva per tutti.

9. moduli

I moduli lunghi possono essere faticosi e apparire rapidamente confusi. In generale, si dovrebbero usare i moduli sui dispositivi mobili solo se necessario. Quando si integrano i moduli, bisogna assicurarsi di chiedere solo i dati effettivamente necessari e fornire all'utente la tastiera appropriata. Lo si fa usando i tipi di modulo HTML appropriati. Questo dice al browser qual è 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.

Migliori pratiche di design UX mobile
Social Login (chiamato anche Single Login) su Pinterest.

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 si adatta al tuo concetto, è comunque importante fornire un feedback. Chi non ha mai premuto un link o un pulsante molte volte di seguito e non è mai stato sicuro se non funziona o se la connessione internet è andata. Questo è qualcosa da evitare. Ci sono trucchi comuni per questo, come il caricamento delle animazioni. L'importante è che l'utente:dentro sappia che la sua 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ò anche essere un problema sui dispositivi mobili. Soprattutto se si vuole accedere da reti instabili, il tempo di attesa non dovrebbe essere così lungo da scoraggiare i visitatori.

13 Accessibilità

WordPress Accessibilità: come creare un sito web accessibile

L'accessibilità in WordPress è una componente importante quando si creano siti web. Ma quanto è accessibile WordPress ? Perché l'accessibilità è così importante? E come puoi rendere il tuo sito web accessibile a tutti? Se ti stai facendo queste domande, la nostra guida all'accessibilità è per te.

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ù diffusi offrono la possibilità di ispezionare il vostro sito web con i cosiddetti Developer Tools. Lì puoi anche controllare il tuo sito web in diverse dimensioni del dispositivo. Altri buoni strumenti per testare i siti web sono Responsinator e BrowserStack Responsive.
Migliori pratiche di design UX mobile
Strumenti per sviluppatori su Google Chrome
  • 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.

Conclusione: le migliori pratiche per il design mobile

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 input sul design UX mobile, consiglio vivamente i Fondamenti Web di Google e questo articolo per un migliore design UX mobile.

Le tue domande su Mobile UX Design

Che domande hai per Sonja sul mobile UX design? Aspettiamo il suo commento. Sei interessato al web design e allo sviluppo? Poi segui RAIDBOXES su Twitter, Facebook, LinkedIn o tramite la nostra newsletter.

Dopo aver studiato Game Design e scrittura creativa, si è specializzata nel web e app designe e nel loro sviluppo. La sua attenzione è rivolta alla gamification e al capire la motivazione e l'esperienza dell'utente, insieme alla passione e alla curiosità per i trend tecnologici.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.