Nine Ways to Improve User Experience in Mobile Design

Questo è un guest post di Ben Terrill. Ben lavora per Mobify e dirige il team che aiuta clienti enormi come Starbucks, Bose e Threadless ad ottenere esperienze eccellenti su mobile e tablet. Ben è co-autore dell’e-book 50 Ways to Please Your Customers (50 Modi per Rendere Felici i Tuoi Clienti): una guida alle best practice del web design per mobile.
Nine Ways to Improve User Experience in Mobile Design

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Nine Ways to Improve User Experience in Mobile Design” di Ben Terrill.

Nove modi per migliorare la user experience nel design mobile

Julie Szabo di Mobify mi ha scritto chiedendomi di aiutarla a promuovere un pò il libro. Tutti voi sapete che raramente mi dedico alla promozione – quindi, tanto per essere chiari: questo non è un post sponsorizzato, non c’è stato alcun passaggio di moneta, il libro è bello e gratuito.
Ho suggerito loro (al team Mobify) di scrivere qualcosa come guest post e mi hanno risposto con degli estratti “best of” del libro. Ho aggiunto alcuni punti qui e lì dove avevo informazioni aggiuntive da condividere. Buona lettura!
A Mobify abbiamo analizzato di recente dati provenienti da oltre 200 milioni di visitatori degli e-commerce dei nostri clienti, e abbiamo scoperto che il 27% delle visite al sito giungevano da utenti che facevano shopping su smartphone e tablet. Per alcuni Paesi, come il Brasile, ci siamo accorti che quasi la metà di tutto il traffico agli e-commerce proveniva da dispositivi mobile.
Ormai è un dato di fatto che ogni compagnia e publisher sul web abbia bisogno di una strategia web sul mobile. Abbiamo scritto un e-book su come costruire un ottimo sito mobile, e qui ci sono nove consigli dal libro che ti aiuteranno a ottimizzare il tuo sito per tutti i visitatori mobile.

ebook

Accenna e rivela (ovvero: apertura progressiva)

I dispositivi mobile hanno dimensioni ridotte e la maggior parte dei siti web presentano molte informazioni. Usa un’apertura progressiva per mostrare agli utenti quali azioni devono intraprendere per scoprire il contenuto che stanno cercando. Non sovraccaricarli con montagne di informazioni in un sol colpo. Concedi loro l’opportunità di espandere o scoprire contenuti in base alle loro esigenze.

Gli accordion possono suonare bella musica

Gli accordion possono risultare una tattica efficace per mostrare contenuto senza stretchare la pagina oltre l’infinito. Usali nel contesto adatto. Conserva quel contesto. Assicurati di fornire un cue expand/collapse coerente.
accrodion
Un esempio dalla pattern library di Brad Frost su CodePen.

I carousel rendono gli utenti felici

I carousel possono essere la soluzione ideale per showcase di immagini, immagini hero e contenuti associati. Assicurati di mostrare ai tuoi utenti in che modo molti elementi sono disposti nel carousel e la loro posizione corrente. Se lo slider è auto-advanced, assicurati che l’auto-advance si fermi appena l’utente inizia a interagire.

carousel

RoyalSlider è responsive, touch enabled, e interrompe l’autoplay alla prima interazione.

Rispetta le dita grosse e il touch tentennante degli utenti

Nessuno di noi è abile come vorrebbe sui propri dispositivi mobile. Tutti possiamo avere un paio di sintomi da “dita grosse”. Disegna le action pensando a questo. Disegna touch target grandi. Raccomandiamo le dimensioni 40px x 40px. Dai anche molto margine ai target. Raccomandiamo almeno 10px di margine intorno ai target. Le azioni primarie dovrebbero essere sempre grandi e tappabili.
Nota: Apple raccomanda 44×44. Approfondisci

Risparmia tempo con le icone font-based

Adoriamo le icone! Aggiungono carattere ai tuoi design. Per evitare di dover gestire uno sprite sheet con asset retina e icone più piccole, opta per un set di icone font-based come: Font Awesome; glyphish; iconsweets; o symbolset. Altrimenti, crea il tuo set. Ecco come.
Nota: le risorse su questo sito includono un articolo sull’ HTML giusto da usare per gli icon fonts, una raccolta di vari icon font e uno screencast su come creare il tuo.

Usa un po’di magia nella gestione degli asset

Genera icone retina e usa l’attribute CSS background-size per ridimensionarle per dispositivi non-retina. Le icone avranno ancora un buon aspetto e non occuperanno molto più spazio rispetto alle versioni più piccole.
Nota dell’editor: Le Retina media queries sono piuttosto facili. In questo modo riesci a fornire immagini retina solo agli schermi che possono usarle. Schermi non-retina = 1x immagini in full size, schermi retina = 2x immagini in half size.

Conosci la misura usabile del viewport e disegna fluido

È indubbio che la misura dello schermo su un iPhone 4 sia di 320x480px (o 960x640px di densita’pixel nel marketing di Apple) ma qual è la misura reale dello screen con il browser Chrome? È quella la misura che l’utente proverà (Risposta: 320x414px).
Conosci la misura usabile dello schermo e tieni il design fluido in modo da trarne vantaggio negli orientamenti sia verticale che orizzontale. Usa quella misura e rendi felici i tuoi utenti.

viewport

Per il font scegli almeno 14px di default

Anche se 14px può sembrarti una misura molto grande, è la scelta giusta da fare. L’unica possibilità di diminuire le dimensioni (e solo fino a un minimo di 12px) è nel caso di label molto precise per i form.

Apriti al vasto mondo dei dispositivi API

A volte quando trasformiamo un sito desktop in un sito mobile ci dimentichiamo che gli smartphone e altri dispositivi mobile hanno accesso alla location dell’utente, fanno telefonate, fotografie e molto altro. Non limitare la tua creatività basandoti solo sugli elementi del sito desktop.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github