Esempi di come i design dei siti web devono essere ottimizzati per supportare il modo in cui manteniamo e interagiamo con gli smartphone
La nostra raccolta di statistiche che mostrano la crescita nell'utilizzo degli smartphone evidenzia la nota esigenza di creare esperienze mobili efficaci. Con i minuti mobili che rappresentano più dei due terzi delle interazioni online in molti paesi, è evidente l'esigenza di ottimizzare i progetti in modo che siano coerenti con il comportamento dei consumatori mentre utilizzano i loro telefoni. Questa esigenza è suggerita anche dalle statistiche che mostrano tassi di conversione più bassi su smartphone (sono tipicamente tra la metà e un terzo di quelli su desktop).
Comportamento dei consumatori dell'interazione mobile
Recentemente ho svolto un corso di formazione per migliorare i viaggi e le esperienze dei clienti mobili in cui ci siamo concentrati su personaggi Millennial e Gen Z. Ho scoperto questa fantastica ricerca "new-to-me" sull'interazione mobile basata su come viene tenuto un telefono e si verificano interazioni con un telefono cellulare utilizzando le dita e i pollici in base ai diversi modi in cui viene tenuto.
È probabile che i progettisti siano consapevoli di questo tipo di ricerca, ma i marketer e i proprietari dei siti sono meno propensi a conoscerlo, quindi ho pensato che fosse utile condividerli dal momento che i detentori del budget dovrebbero basare le loro domande di ottimizzazione del sito web e riprogettare i requisiti basati su comportamento dell'utente piuttosto che il loro comportamento personale!
Questo riepilogo della ricerca su come gli utenti tengono davvero i dispositivi mobili? ha alcuni grandi riassunti di comuni interazioni smartphone a una ea due mani. Questi sono:
1. Uso con una mano o due mani?
Gli utenti di smartphone sono stati osservati toccando gli schermi oi pulsanti del telefono e tenendo i loro telefoni in tre modi fondamentali:
- Con una mano – 49%
- Cullato – 36%
- A due mani – 15%
2. Sinistra o destrezza?
Per l'uso con una sola mano, l'uso più comune era:
- Pollice destro sullo schermo – 67%
- Pollice sinistro sullo schermo – 33%
Il ricercatore, Stephen Doober, commenta:
"Non sono sicuro di cosa pensare di queste cifre di consegna. Il tasso di mancinismo per uso con una sola mano non sembra correlare con il tasso di mancinismo nella popolazione generale – circa il 10% – soprattutto in confronto al tasso di mancini molto diverso per il cullare – 21% ".
3. Comportamento di cullaggio comune?
Cullare è dove il telefono è supportato con due mani. La divisione dei comportamenti qui è:
- Pollice sullo schermo – 72%
- Dito sullo schermo – 28%
Quindi, i pollici vincono, stiamo progettando principalmente per i pollici. Ho notato che gli utenti telefonici più esperti e in genere più giovani usano l'approccio a culla con il pollice, probabilmente perché usano i pollici per l'invio di messaggi con touch-thumb, quindi sono più familiari con questo.
Naturalmente, ci sono un pollice e due comportamenti pollici come segue:
4. Zone di interazione dello schermo prioritario
Questo articolo su The Thumb Zone: Designing For Mobile Users ha il miglior riassunto dei comportamenti, che dovrebbero informare il design sulla base della ricerca originale.
Questo sommario suggerisce una progettazione "migliore pratica" dei punti di interazione dello schermo, vale a dire che gli inviti all'azione (CTA) dovrebbero concentrarsi nelle aree verdi naturali ed evitare le "aree dure" rosse. Tra l'altro queste aree rosse sono dove si trova spesso il menu di navigazione, quindi dovrebbero essere fornite alternative a questo carico sulla pagina, evidenziando i viaggi prioritari con i clienti come suggerito dai prossimi esempi.
Esempi di progettazione di interazione mobile buona e scarsa
Nel seminario di formazione abbiamo fatto un benchmark contro questo marchio di comparatori in cui abbiamo notato che il sito americano era ottimizzato per le interazioni mobili rispetto al sito del Regno Unito che non lo era, quindi ho pensato che fosse un buon esempio per condividere …
In primo luogo, ecco il sito del marchio del Regno Unito, che utilizza Mobile responsive web design (RWD), in modo che il contenuto si adatti al viewport mobile, eppure è lontano dall'ottimizzazione mobile; puoi vedere che non ha una "icona del menu hamburger", che è diventata una funzionalità standard, ma molto discussa in UX mobile. Inoltre, non ha altre navigazioni above the fold in termini di call-to-action. Ugualmente povero, non mostra la proposizione digitale del valore oltre al generico "Benvenuto nella casa di".
Confronta questo con il sito americano, che a mio avviso ha un ottimo RWD mobile che è un esempio di un design 'Mobile-first', in cui le principali interazioni con un utente sulla home page sono ben ponderate.
Esistono chiari CTA "thumbs-ready" per i due obiettivi del sito prioritari, che supportano il comportamento di acquisto e incoraggiano i clienti a partecipare al programma di premi.
Questo design ha anche un elemento interessante che mostra visivamente il viaggio del cliente per i bambini più grandi, come questo secondo design su scroll shows. Non sono sicuro che ciò sia ovvio e crea una strana ripetizione di CTA su scroll.
Per valutare il tuo design mobile, ti consiglio una tecnica semplice che abbiamo utilizzato nel laboratorio in cui crei una tabella con colonne che elenca la gerarchia visiva di messaggi, immagini e inviti all'azione mentre l'utente scorre sullo smartphone. Questi possono essere confrontati con i concorrenti e per verificare se hai gli obiettivi impostati in Google Analytics.
Implicazioni accessibili del RWD mobile
Il design dei siti mobili è anche "vicino al mio cuore" in questo momento da quando ho iniziato di recente a fare volontariato per AbilityNet e sto aiutando i non vedenti a configurare i loro browser su tablet e smartphone in modo che possano vedere e interagire con loro più facilmente.
Un altro vantaggio dell'ottimizzazione del design del sito è "mobile-first": l'accessibilità dovrebbe migliorare se si seguono le migliori pratiche in materia di ridimensionamento di testo e immagini. Ad esempio, questo articolo sugli stili per dispositivi mobili accessibili da Google Developers su WebFundamentals consiglia:
- Impostazione di una dimensione minima di destinazione consigliata per il tocco (consigliato come minimo di 48 pixel nell'articolo)
- Usando il viewport metatag e larghezza delle impostazioni correttamente per il ridimensionamento del testo (i siti RWD che sbagliano hanno un testo minuscolo che nessuno può leggere)
- Progettare con una griglia reattiva con valori relativi piuttosto che assoluti (reflows e scale di contenuto)
- Evidenziazione degli elementi dell'interfaccia (ad esempio campi di input)
Modifica del design del browser per supportare le interazioni mobili
Come ultima nota a margine, mi è stato chiesto di scrivere questo articolo a causa dell'ultimo aggiornamento del browser Chrome in cui le funzioni primarie precedenti, Ricerca, gestione schede e altre opzioni sono ora ai piedi dello schermo anziché in alto . Questo è un grande miglioramento che trovo, che probabilmente spingerà alcuni a cambiare il loro comportamento in una "navigazione basata su pollici". Ho cambiato il mio comportamento già suggerito da questo.
In questo caso, Google è dietro a Apple che ha aggiornato Safari a una navigazione browser smartphone basata sul piè di pagina in precedenza. Chiaramente entrambi hanno ritardato il comportamento degli utenti da un po 'di tempo, come molte aziende hanno con i loro progetti del sito.
Spero che tu sia d'accordo sul fatto che la ricerca sia davvero un bel riassunto visivo del comportamento, ma tieni presente che la ricerca mostrata qui non è nell'ultimo anno, che solitamente compaiono nel grafico del giorno. Invece è del 2013, quindi ricorda che le interazioni potrebbero essere cambiate in questo momento. Fammi sapere dal punto di vista sociale se sei a conoscenza di una ricerca più recente, che ha anche un crollo demografico.
Fonte di ricerca
- fonte: UX Matters article di Steven Hoober – Come gli utenti tengono davvero i dispositivi mobili?
- Campione: Per due mesi, terminando l'8 gennaio 2013, io e alcuni altri ricercatori abbiamo fatto 1.333 osservazioni di persone che usavano dispositivi mobili per strada, negli aeroporti, alle fermate degli autobus, nei caffè, sui treni e sugli autobus, ovunque potessimo guardali. Di queste persone, 780 toccavano lo schermo per scorrere o digitare, toccare o usare altri gesti per inserire i dati. Il resto stava solo ascoltando, guardando o parlando sui loro dispositivi mobili.
- Raccomandata risorsa Smart Insights: Guida ai modelli di progettazione e-commerce