Best practice per la navigazione sul Web mobile
Il modo in cui le persone accedono alle informazioni online si sta evolvendo. Google riferisce che entro il prossimo anno (2013) più della metà delle visite al sito web provengono da dispositivi mobili anziché da desktop o laptop.
Non solo il mezzo di accesso al web si sta modificando, ma anche le esigenze della maggior parte degli utenti mobili in linea con lo smartphone o il dispositivo portatile stanno cambiando; diventando più focalizzato e orientato al compito.
Gli odierni possessori di smartphone usano i loro telefoni per eseguire compiti specifici come il controllo di posizioni di destinazioni, piani di trasporto pubblico e saldi bancari. Mentre si naviga in Internet su dispositivi palmari (specialmente quando si è in fila o in attesa di un autobus) molte persone preferiscono navigare sul Web comodamente da casa o dall'ufficio.
Lo spazio su schermo è limitato sui dispositivi palmari e gli utenti mobili sono occupati, spesso in multitasking mentre cercano informazioni online con un dito o un dito.
Per questi motivi, la navigazione dei siti mobili è ancora più importante della navigazione su un sito web tradizionale. Comprendere le domande e le esigenze del tipico visitatore del sito, i limiti del proprio dispositivo e ciò che li frustrerà, è fondamentale per una progettazione di navigazione efficace su un sito mobile.
Quali sono gli utenti mobili che chiedono quando vanno online?
Compuware Lo studio del 2011 su What Users Want from Mobile ha rilevato che il 95% degli utenti cercava informazioni locali con i propri smartphone o dispositivi palmari. Sarebbe quindi una buona pratica per le imprese di mattoni e terrazze di caratterizzare la navigazione verso la loro posizione, le ore e le informazioni di contatto in modo prominente sui siti mobili.
Mettiti nei panni del tipico utente del sito. Dai un'occhiata alle analisi per il traffico mobile. Scegli le prime tre o quattro categorie che gli utenti cercano e seleziona i nomi delle categorie che riflettono le ricerche più comuni.
Se si tratta di un sito mobile per un'attività commerciale, visualizzare un pulsante per la posizione e le informazioni di contatto in modo visibile.
Puoi sempre aggiungere un link per "visitare il nostro sito" e chi è davvero interessato può guardare una versione più elaborata del sito mobile nel comfort del proprio ufficio oa casa con il proprio laptop.
7 For All Mankind conosce i propri utenti.
Progettare per un ambiente diverso
Oltre ai parametri e alle distrazioni dell'ambiente esterno, i web designer devono anche valutare i dispositivi stessi durante la progettazione degli elementi di navigazione.
Un architetto non difenderebbe esattamente lo stesso progetto di costruzione per il centro della città, deserto o foresta, un buon web designer considera le opportunità e le limitazioni dell'ambiente mobile per creare la navigazione più utilizzabile per la mobilità.
Il problema, naturalmente, è che il progettista non sa quale dispositivo l'utente stia trattenendo quando visita il sito, una situazione che può essere affrontata utilizzando strumenti di progettazione reattivi come le query multimediali CSS per affrontare i problemi di posizione, dimensioni e contenuto adattabile. Che si tratti di progettare un sito mobile nuovo di zecca utilizzando un design reattivo o adattando un sito esistente per dispositivi mobili, esistono ancora alcune best practice valide per la navigazione.
Menu di navigazione per il piccolo schermo
I Web designer sanno che gli utenti mobili si comportano in modo diverso quando accedono al Web sui loro smartphone e dispositivi portatili di quanto non facciano sui loro computer desktop o laptop. Trovare spazio per la navigazione su un piccolo schermo può essere complicato, ma con un po 'di pianificazione attenta è possibile realizzare un design di navigazione mobile.
Con solo quattro pulsanti di navigazione e il numero verde di prenotazione ben visibile, il sito mobile Loews Hotels è facile da usare e da navigare.
Best practice 1: ridurre il numero di pulsanti del menu
Questo può essere complicato quando si progetta una versione ottimizzata per dispositivi mobili di un sito Web esistente, in particolare uno che ha molti collegamenti nella progettazione desktop. Limita i tuoi pulsanti di navigazione principale a cinque o meno, aggiungendo i menu nidificati, se necessario.
Best practice 2: ridurre il numero di tocchi
Mantenere il numero di azioni da eseguire su un dispositivo mobile al minimo. Meno tocchi e clic per trovare ciò che l'utente sta cercando e meglio. È troppo facile fare un errore. Includere sempre un pulsante indietro facile da trovare: non si vuole frustrare ulteriormente l'utente.
Best practice 3: navigazione a scorrimento
Mantieni gli elementi di navigazione più importanti in alto. I dispositivi mobili hanno schermi di dimensioni diverse, quindi pensa attentamente all'importanza di ciascuna categoria, perché quelli più in basso nella lista potrebbero richiedere lo scorrimento su smartphone con meno spazio sullo schermo.
Best practice 4: pulsanti impilabili
Gli utenti mobili vedono il tuo sito in verticale anziché in orizzontale come fanno su un desktop. Adatta la tua navigazione per il web mobile presentandolo verticalmente. Leggi giù invece di across. Questo funziona meglio per i siti con non più di cinque categorie nel menu e quando è improbabile verranno aggiunte più categorie.
Best practice 5: menu nidificato
Talvolta noto come navigazione comprimibile, questa è una buona opzione per i siti che richiedono contenuti sullo schermo e un menu e quelli che prevedono di aggiungere categorie e voci di menu.
Ottimizzazione della navigazione in mobilità per touchscreen e pulsanti piccoli
Touchscreen e piccoli pulsanti significano nuove considerazioni per i web designer. Gli utenti mobili non hanno il lusso di un mouse cliccabile per individuare un piccolo pulsante o collegamento di menu. Sono alla mercé delle loro dita e dei loro pollici, il che significa che puntano a zone dello schermo con molta meno precisione rispetto a quando usano un mouse e possono facilmente essere frustrati se il loro tocco non produce risultati immediati.
I web designer possono semplificare la navigazione per gli utenti mobili aggiungendo più spazio intorno ai collegamenti dei menu o sostituendo i collegamenti con i pulsanti per le categorie di menu.
Rendendolo più grande, è più facile trovare un'area rapidamente e fare clic con un piccolo pulsante del telefono, oppure toccarlo con un dito o un pollice. Poiché il dito medio richiede un'area cliccabile di almeno 44 px x 44 px, ciò potrebbe comportare la disattivazione dei pulsanti e delle aree di navigazione sul resto del contenuto sullo schermo. Tuttavia questo può essere adatto allo scopo del sito Web e dell'utente, specialmente se il contenuto della pagina iniziale è secondario rispetto alle voci principali del menu.
Idealmente, il design dovrebbe consentire all'utente touchscreen di ingrandire il pulsante di navigazione se necessario.
Suggerimenti per l'ottimizzazione
- Imposta il menu nella parte superiore o inferiore dello schermo, a seconda dello scopo principale degli utenti del sito. Se sono alla ricerca di contenuti e probabilmente lo scorrimento, mettendo il menu in basso dà loro un altro posto per andare sul tuo sito piuttosto che lasciare il sito per un motore di ricerca o sito della concorrenza.
- Nascondere parzialmente il menu per accogliere altri contenuti sullo schermo, rivelando il menu completo quando gli utenti lo toccano. Ciò mantiene il menu in primo piano e senza cancellare contenuti utili.
- Posiziona un collegamento Menu nella parte superiore dello schermo e aggiungi un pulsante di navigazione in basso.
- Alto e magro può essere ottimo per le supermodelle, ma nella navigazione web mobile breve e ampia è bello. L'ampia navigazione corta aiuta anche quando hai titoli di categoria più lunghi - il testo si adatta meglio.
- Ridurre l'altezza delle immagini di intestazione o sostituirle del tutto con un logo più piccolo per aumentare lo spazio per la navigazione.
- Mantieni coerenti i problemi di branding e design prestando attenzione alla tipografia, al colore e allo stile dei pulsanti di navigazione invece di utilizzare uno spazio prezioso con immagini e grafica di grandi dimensioni.
- Riduci il testo, in particolare sui pulsanti di menu e titoli di categoria. In alcuni casi questo è estremamente difficile e un menu impilabile con spazio per più testo su ogni riga è un'alternativa preferibile.
- Semplifica il più possibile. Rimuovi il più possibile dalla home page per concentrarti solo sui pochi elementi che la maggior parte degli utenti desidera.
No-no di navigazione mobile
Gli utenti mobili sono occupati, distratti e in movimento. Non vogliono varietà nella scelta dei pulsanti da scegliere e non vogliono che diventino frustrati e abbandonino il sito a causa della paralisi dell'analisi.
Non dare loro molta scelta.
Evita lo scorrimento orizzontale e non ti alzi! I menu dei dispositivi di scorrimento possono anche essere frustranti per gli utenti di dispositivi mobili. Nella tua missione di semplificare e semplificare la navigazione, non pensare di essere noioso. La navigazione creativa non è una brutta cosa, ma deve essere intuitiva. L'utente dovrebbe essere in grado di vedere facilmente dove andare per trovare rapidamente le informazioni che vogliono.
Conclusione
La relativa novità dei dispositivi mobili come metodo di accesso al web significa che la navigazione mobile è in continua evoluzione mentre diversi progetti vengono provati, ottimizzati o eliminati del tutto.
Ciò che funziona per un gruppo di utenti su un sito può essere un disastro con un sito diverso in quanto le informazioni che l'utente cerca sono completamente diverse. Inoltre, lo stesso utente si avvicina a diversi siti con scopi diversi: un utente mobile che guarda un sito Web di notizie sul suo telefono molto probabilmente desidera titoli, non informazioni di contatto; che è esattamente ciò che vuole quando visita il sito mobile per il suo dentista o parrucchiere.
Mentre gli elementi di navigazione per un sito web mobile possono differire da quelli di un sito web tradizionale, lo scopo è lo stesso: i visitatori del web hanno una domanda quando vanno online. Dov'è il negozio? Cosa sta succedendo nel mondo? Qual è il saldo del mio conto bancario? Una grande navigazione porta gli utenti alle risposte in modo rapido e semplice.
Soddisfare le loro esigenze immediate e torneranno, aumentando il traffico verso il sito Web, rendendo felici i vostri clienti e portando a referral e più attività di web design mobile per voi.
Quali approcci alla navigazione mobile preferisci come designer? Che ne dici di un utente? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine di internet mobile via Shutterstock.