5 consigli su Mobile Ux che ogni designer dovrebbe seguire

Al momento ci si concentra molto sulla risoluzione dei problemi dei dispositivi mobili, inclusi i problemi di prestazioni dei dispositivi mobili poiché gli utenti continuano a rimanere incollati ai loro dispositivi più piccoli.

In genere, questi problemi vengono risolti dopo l'avvio di un sito, quando iniziano a comparire errori nei rapporti di Google Search Console sull'usabilità mobile. Sebbene i team di sviluppo possano spesso risolvere tali errori, è molto più efficiente per i progettisti comprendere e implementare le migliori pratiche di UX mobile fin dall'inizio.

Anche la velocità dei dispositivi mobili è un fattore importante per l'ottimizzazione dei motori di ricerca, quindi designer e sviluppatori devono considerare in che modo tutto, dall'animazione alle immagini, influirà su queste metriche.

Concentrati sulla spaziatura degli elementi di design

La spaziatura degli elementi di design non riguarda solo la creazione di un piacevole flusso visivo; si tratta di rendere il tuo sito facile da usare per tutti i visitatori, compresi quelli sui dispositivi mobili.

Un errore comune di usabilità mobile in Google Search Console è che "gli elementi cliccabili sono troppo vicini tra loro".

Ciò crea un'esperienza frustrante per i visitatori su dispositivi più piccoli in cui fanno inavvertitamente clic su elementi durante il tentativo di navigare nel sito.

Dal punto di vista del design dell'esperienza utente mobile, i pulsanti e gli elementi interattivi o cliccabili devono essere sufficientemente grandi e posizionati sufficientemente distanziati nel design.

Su un desktop, i visitatori navigano con un mouse, che è uno strumento molto preciso, mentre su dispositivi mobili, la maggior parte degli utenti utilizza i pollici. I pollici sono in genere più grandi del cursore del mouse e possono essere un po' più goffi, soprattutto se stai cercando di navigare in un sito mentre cammini o fai multitasking.

Pertanto, è necessario progettare uno spazio sufficiente tra pulsanti ed elementi, in modo che il visitatore non abbia un'esperienza mobile frustrante.

Devi anche considerare l'accessibilità e il modo in cui i visitatori potrebbero tenere il dispositivo più piccolo. Alcuni potrebbero tenere il telefono o il tablet con la mano sinistra, altri con la mano destra o altri con entrambe le mani. Il design del sito deve essere facile da navigare indipendentemente da ciò.

Infine, i visitatori utilizzano anche il pollice per scorrere sul dispositivo e scorrere la pagina Web, quindi è necessario assicurarsi che non ci siano elementi cliccabili di grandi dimensioni che potrebbero toccare inavvertitamente durante lo scorrimento.

Garantire la leggibilità del testo e dei caratteri

Oltre alla spaziatura, un altro errore comune di usabilità mobile nei rapporti di Google Search Console è "il testo è troppo piccolo per essere letto". Sebbene uno sviluppatore possa modificare alcuni aspetti del dimensionamento dei caratteri, esistono diverse best practice per l'esperienza utente che i team di progettazione possono implementare sin dall'inizio in termini di leggibilità.

Selezionare un carattere tipografico facilmente leggibile è il primo punto di partenza. Ricorda che gli utenti sono spesso a piedi o multitasking o all'aperto mentre si trovano sui loro dispositivi più piccoli e potrebbero trovarsi in scenari non ideali mentre tentano di navigare nel tuo sito.

La creazione di una gerarchia visiva in termini di dimensione del carattere è un altro modo per aiutare gli utenti mobili a scansionare e comprendere rapidamente il contenuto della pagina. Aiuta anche su dispositivi mobili o tablet in cui i testi dei titoli possono andare a capo alla riga successiva. L'utilizzo dello stesso tipo di carattere e dimensioni in tutta la pagina può causare confusione sul significato della pagina.

Nei tuoi progetti, puoi anche aumentare l'altezza della linea tra le righe di testo per aumentare la leggibilità di una pagina.

Una volta che hai deciso il carattere e le dimensioni, devi anche considerare i rapporti di contrasto del colore.

Poiché i visitatori possono trovarsi all'interno o all'esterno o in condizioni di scarsa illuminazione, è importante seguire gli standard per il contrasto tra i colori di sfondo e di primo piano.

Questo gioca anche un ruolo nell'accessibilità e nella creazione di un sito Web conforme all'ADA. Secondo gli standard WCAG 2.1, si raccomanda un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo di grandi dimensioni.

Assicurati che i passaggi del mouse e l'animazione seguano le migliori pratiche

La maggior parte dei progetti web oggi incorpora alcune micro-animazioni e componenti interattivi; è una richiesta comune da parte dei clienti in un processo di riprogettazione.

L'aggiunta di movimento a un sito è spesso una collaborazione tra designer e sviluppatori poiché l'animazione può influire sul tempo di caricamento della pagina e causare un controllo di qualità infinito se non codificata correttamente. Quando selezioni le animazioni nel processo di progettazione, devi anche pianificare se tali interazioni si verificheranno sui dispositivi mobili.

A causa di problemi di prestazioni, è comune disattivare animazioni complesse e sfondi video sui dispositivi mobili perché possono rallentare il tempo di caricamento del sito, soprattutto per i visitatori su una rete mobile. Questo tipo di alterazione è sempre più comune dal 2018, quando la velocità della pagina mobile è diventata uno dei fattori di ranking di Google.

In generale, l'animazione e l'interazione dovrebbero essere utilizzate in modi sottili per supportare l'esperienza dell'utente e non dovrebbero distrarre il visitatore. Né dovrebbe essere un ingrediente essenziale per aiutare un visitatore a completare un'azione.

I passaggi al passaggio del mouse sono un altro elemento di design comune che potrebbe apparire diverso sui dispositivi mobili. Sul desktop, un passaggio del mouse si riferisce a un oggetto o un'immagine che cambia o rivela del testo quando il visitatore passa il mouse su di esso. Sebbene funzioni bene su dispositivi di grandi dimensioni, tieni presente che sui dispositivi mobili i visitatori non utilizzano il mouse, il che significa che il visitatore dovrà toccare per visualizzare il passaggio del mouse.

Pertanto, se hai una casella o un'immagine che rivela del testo al passaggio del mouse, dovresti assicurarti che il messaggio non sia fondamentale per i passaggi dei visitatori.

Quando si discute di animazione, tu e il tuo team di sviluppo potete anche esaminare le best practice di Google per le linee guida sull'animazione web al fine di evitare errori relativi a tecnologia flash o obsoleta.

Pianifica il posizionamento di popup ed elementi di terze parti

Si è sempre discusso molto sull'opportunità di utilizzare i moduli pop-up sui siti Web e se implementarli sui dispositivi mobili.

Un argomento per evitare i moduli popup sui dispositivi mobili è che può essere più difficile per un visitatore chiudere il modulo o il messaggio. Da gennaio 2017, Google ha messo in guardia contro l'uso di interstitial intrusivi che impediscono a tutti i contenuti di una pagina di essere visibili a un visitatore, poiché sono particolarmente problematici sui dispositivi mobili.

Puoi valutare tutti questi elementi nelle discussioni con i clienti sui moduli pop-up e decidere la migliore esperienza utente per la progettazione del modulo.

Quando si adotta un approccio di progettazione basato sui dispositivi mobili, è utile considerare come verranno posizionati gli elementi su dispositivi più piccoli. Ad esempio, un pulsante appiccicoso sul lato destro dello schermo che rimane mentre un visitatore scorre può funzionare bene sul desktop, ma questi tipi di elementi appiccicosi possono ridurre lo spazio di visualizzazione su un dispositivo mobile.

Sebbene alcuni elementi come la chat dal vivo e i widget di accessibilità possano essere aggiunti all'ultimo momento, la pianificazione di questi elementi in precedenza nel processo di progettazione web può aiutare a evitare un'interfaccia caotica per i visitatori.

La chat dal vivo è diventata uno strumento estremamente popolare e i widget di chat si trovano spesso nell'angolo in basso a destra oa sinistra del design. Offrire consigli sul posizionamento di questi elementi includendoli nei modelli di progettazione ti aiuterà a prevedere eventuali problemi con elementi sovrapposti.

Riconsiderare la progettazione e il posizionamento dei moduli

La compilazione e l'invio di un modulo su un dispositivo mobile o un tablet più piccolo può essere un'attività fastidiosa per i visitatori. Ecco perché è fondamentale considerare opzioni alternative ai moduli nella progettazione del sito.

Quando crei la navigazione del menu mobile, considera di includere un numero di telefono "clicca per chiamare" nell'intestazione, in modo che i visitatori possano raggiungere facilmente l'attività.

Quando si progettano tutti i moduli sul sito, è consigliabile sia per desktop che per dispositivi mobili ridurre il più possibile il numero di campi modulo e indicare chiaramente qual è un campo obbligatorio.

Un suggerimento per l'esperienza mobile di un modulo è progettare etichette modulo e non utilizzare solo testo segnaposto per i campi modulo. Un visitatore su un dispositivo mobile può essere facilmente interrotto da altre notifiche e interazioni, quindi potrebbe essere interrotto nel processo di completamento del modulo e dimenticare ciò che il testo del segnaposto elencato. Fornire etichette chiare dei moduli e messaggi di errore è importante anche per la conformità ADA.

Infine, il posizionamento del modulo sulla pagina e il modo in cui questo può essere regolato con il layout reattivo è fondamentale poiché il posizionamento del modulo può influire sulle conversioni.

Conclusione

Data la maggiore attenzione alle prestazioni mobili, mettere in pratica alcune delle idee di cui sopra mentre progetti i tuoi progetti ti farà risparmiare tempo e frustrazione quando questi progetti verranno lanciati. Ci sono ulteriori suggerimenti per l'esperienza utente mobile che hanno aiutato il flusso di progettazione? Lascia un commento qui sotto!

Successivo: Sviluppa le tue competenze di web design con utili corsi online!

Il design dell'UX mobile è solo una delle tante cose su cui devi stare al passo come web designer professionista. Anche se non c'è sempre molto tempo a disposizione per affinare le tue abilità, seguire un corso online è un ottimo modo per assicurarti di continuare la tua formazione.

Questo articolo offre un elenco completo di alcuni dei migliori corsi online per web designer (+quanto costano) in modo da non dover perdere ancora più tempo a cercare tra tutte le opzioni disponibili!