5 errori di navigazione Web che ti stanno costando conversioni

Pubblicato: 2017-03-01

5 errori di navigazione Web che ti stanno costando conversioni

Se i visitatori non riescono a trovarlo, allora non esiste.

I web marketer spesso sono troppo presi dall'estetica dei siti web da dimenticarsi di rendere facile per gli utenti trovare ciò di cui hanno bisogno.

Certo, un aspetto moderno e professionale è essenziale per guadagnare la fiducia dei visitatori del web. Tuttavia, il web design dovrebbe supportare le attività degli utenti e non pregiudicare l'usabilità e la rilevabilità.

Ecco alcuni errori comuni che ostacolano la navigazione efficiente del tuo sito da parte degli utenti:

1. Navigazione nascosta su schermi di grandi dimensioni

Sui dispositivi mobili in cui disponi di uno spazio su schermo piccolo con cui lavorare, è possibile nascondere la navigazione sotto un menu (in genere l'icona dell'hamburger). Ciò non ha senso, tuttavia, sul desktop dove c'è molto spazio per mostrare le opzioni di navigazione.

Menu desktop nascosto

Esempio: WhySoCool.com

Uno studio condotto da Nielsen Norman Group e WhatUsersDo ha mostrato che, rispetto alla navigazione visibile o parzialmente nascosta, la navigazione nascosta è...

  • utilizzato di meno e utilizzato più avanti nell'attività (se la persona lo utilizza) sia su dispositivo mobile che desktop
  • è più probabile che venga utilizzato su dispositivi mobili rispetto a desktop – Questo potrebbe essere perché...
    • negli schermi più piccoli, l'icona del menu è più evidente
    • la navigazione nascosta è la norma sui dispositivi mobili
    • i tempi di caricamento sono più lenti sui dispositivi mobili e le persone preferiscono utilizzare il menu piuttosto che scorrere per trovare ciò di cui hanno bisogno (poiché in genere ci sono meno contenuti above the fold)

Lo studio ha anche rivelato che l'esperienza dell'utente è influenzata negativamente dalla navigazione nascosta su dispositivi mobili e desktop:

  • La rilevabilità dei contenuti è inferiore
  • I punteggi di difficoltà sono più alti
  • Il tempo sull'attività è più lungo

Quindi, esponi le opzioni di navigazione di primo livello sul desktop. Nasconderli sotto un menu non aiuta i tuoi utenti né le conversioni del tuo sito, nonostante la popolarità del "mobile first".

2. Falso fondo

Quando non è immediatamente ovvio per gli utenti che ci sono più contenuti oltre un certo punto , hai un problema di "falso fondo".

Ecco alcuni colpevoli per le persone che credono di aver raggiunto la fine del contenuto e, quindi, hanno difficoltà a individuare ciò di cui hanno bisogno:

Immagini o grafica di grandi dimensioni che riempiono l'intero schermo

Le riprese dell'eroe sono famose per aver monopolizzato immobili above-the-fold e aver spinto verso il basso altri elementi importanti come simboli di fiducia e punti di ingresso chiari per diversi segmenti di clienti. Inoltre, quando l'immagine occupa l'intero schermo, anche la parte inferiore dell'immagine potrebbe essere confusa con la parte inferiore della pagina.

Illusion Of Complete Hero Shot

Esempio: NhoraOsorio.com

Se devi davvero avere uno schermo pieno di immagini o grafica, almeno un segnale direzionale esplicito .

WeAreMinimal.com, ad esempio, utilizza deliberatamente il movimento, sotto forma di una freccia che rimbalza, per attirare l'attenzione dell'utente e segnalare che c'è di più sotto la piega.

Spunto direzionale

Esempio: WeAreMinimal.com

Linee Orizzontali

In generale, le linee e le regole orizzontali sono interpretate dal cervello come segnali di stop.

Fai attenzione a posizionare linee orizzontali che si estendono per l'intera larghezza della pagina tra le sezioni del contenuto. Possono scoraggiare gli utenti dall'esplorare ulteriormente. Gli utenti potrebbero non rendersi conto che il separatore segnala la fine di una sezione e non la pagina.

Illusion Of Completezza Linee Orizzontali Studio Rakel

Esempio: StudioRakelShop.com

Annunci che interrompono il flusso di contenuti

Anche gli annunci di grandi dimensioni, quelli che rendono difficile vedere ciò che si trova al di sotto, possono essere interpretati erroneamente come la fine del contenuto.

Cosmopolitan.com sembra riconoscere questo problema e cerca di alleviarlo etichettando l'annuncio e indirizzando gli utenti a "Continua a leggere di seguito".

Illusion Of Completezza Gli annunci interrompono il contenuto

Esempio: Cosmopolitan.com

Uso eccessivo dello spazio negativo

Lo spazio negativo aiuta a creare enfasi visiva e gerarchia sulla pagina. Troppo spazio negativo tra gli elementi di contenuto, tuttavia, potrebbe essere interpretato nel senso che "non c'è più niente da vedere".

Il problema è peggiore sui piccoli schermi dove il divario tra gli elementi diventa più pronunciato, rendendo i contenuti più in basso nella pagina ancora meno rilevabili.

Illusione di completezza Uso eccessivo dello spazio negativo

Esempio: ShopGraceGow.com

3. Mancanza di Significanti di Affordance

Uno dei motivi per cui gli utenti non riescono a trovare ciò che dovrebbero fare dopo è la mancanza di significanti di affordance. La mancanza di segnali visivi per segnalare con quali elementi è possibile interagire si traduce in incertezza sui clic : gli utenti passano il mouse su diversi elementi della pagina per identificare quale è selezionabile.

Nel corpo della home page di BHLDN.com, ad esempio, gli elementi cliccabili sono poco appariscenti. La pagina utilizza le frecce per segnalare che puoi interagire con gli elementi, ma gli elementi cliccabili non assomigliano a elementi cliccabili come i pulsanti.

Invece, ottieni un miscuglio casuale di etichette su cui è possibile fare clic, etichette su cui non è possibile fare clic e nessun buon modo per differenziare tra i due.

BHLN Significato di Affordance mancante Esempio: BHLDN.com

4. Etichette di navigazione vaghe

Le etichette sono i segnali stradali del tuo sito: se creano confusione, gli utenti si perderanno.

Assicurati che le tue etichette siano chiare e precise. Dovrebbero essere in grado di dire agli utenti cosa succede quando fanno clic su un elemento di navigazione.

Una versione precedente della home page di Teforia.com, ad esempio, aveva "Tea Transformed" come invito all'azione (CTA). Questa è un'etichetta senza contenuto: in realtà non comunica nulla su ciò che gli utenti possono aspettarsi se fanno clic su di essa.

Vaga Cta Teforia

GorillaMovers.com, d'altra parte, ha opzioni di navigazione di primo livello poco chiare. C'è "Compra", ma non è chiaro cosa sia possibile acquistare; e c'è "Fai domanda con noi" che può significare "fai domanda con noi per ottenere un preventivo" o "fai domanda con noi per ottenere un lavoro".

Etichette vaghe Gorila Movers

Esempio: GorillaMovers.com

5. Deviazione dalle Convenzioni Web

Il cervello umano si basa molto sulle scorciatoie. Se il tuo sito web non corrisponde al modello mentale degli utenti su come dovrebbe funzionare un sito web, renderai la navigazione più problematica di quanto non valga per molti visitatori.

Ecco un paio di esempi di modelli di progettazione che gli utenti sono stati condizionati ad aspettarsi sulle pagine web:

Posizionamento del logo

Quando gli utenti Web atterrano su una pagina, in genere si orientano su dove si trovano sul Web guardando in alto a sinistra della pagina per il logo dell'azienda. Il logo è anche tradizionalmente un elemento cliccabile che consente agli utenti di navigare facilmente alla home page.

Quindi, fai attenzione a posizionare il logo al centro o nell'angolo in alto a destra della pagina. Questo potrebbe funzionare su schermi più piccoli in cui la distanza tra l'angolo sinistro e l'angolo destro è trascurabile. Su schermi più grandi, tuttavia, può influire negativamente sull'efficienza degli utenti nella navigazione verso la home page.

Colore del collegamento ipertestuale del corpo

Le persone trascorrono la maggior parte del loro tempo su altri siti e su altri siti, i collegamenti ipertestuali nel corpo della pagina sono generalmente identificati da colori in modo che non si confondano.

Puoi usare qualsiasi colore, purché si presenti e non venga utilizzato su altro testo nella pagina. In questo modo, gli utenti possono identificare immediatamente i collegamenti ipertestuali. Detto questo, la soluzione migliore è il colore blu, poiché gli utenti web sono stati condizionati ad associare quel colore ai collegamenti ipertestuali.

Mettere tutto insieme

Ottenere la corretta navigazione può essere complicato quando si dispone di un mondo multi-dispositivo e multicanale. Detto questo, solo ottenere i fondamenti può portarti abbastanza lontano.

Se ti astieni dal creare falsi fondi, segui le convenzioni web, eviti di nascondere la barra di navigazione su desktop e laptop, mostri significanti che indicano ai visitatori quali elementi sono selezionabili ed etichetti chiaramente le tue opzioni di navigazione, farai sì che un minor numero di visitatori se ne vada senza fare nulla .

Piè di pagina del blog Cta1