Mobile first design: come ottimizzare un ecommerce?

Mobile first design: come ottimizzare un ecommerce?
1 Agosto 2019

Continua la nostra rubrica consigli user experience sotto l’ombrellone: oggi parliamo di mobile first design.
Vogliamo concentarci sulla navigazione da mobile, non ti sei perso la prima parte vero? Sei curioso di scoprire come mantenere il tuo sito web sempre al passo con i tempi? Vediamolo insieme.

Dal 1° Luglio 2019, Google ha iniziato ad utilizzare di default il mobile first index, un indice che permette all’algoritmo del famoso motore di ricerca, di prendere in considerazione prima la versione mobile di un sito (anzichè quella desktop come in passato) per determinare l’indicizzazione e il posizionamento dei nuovi siti web. Ciò cosa comporta?

Oggi più che mai, avere un sito dal mobile first design, perfettamente ottimizzato, è fondamentale sia per farti trovare dai tuoi utenti, sia per Google.

Mobile first design - IMPRIMIS

Mobile first

La struttura di un ecommerce dal mobile first design presuppone di iniziare a progettare il layout delle pagine così come appariranno su un dispositivo mobile, perfezionandolo solo in seconda fase per gli altri dispositivi.

Uno smartphone, ha alcuni vincoli dovuti alla grandezza e durante la progettazione, occorre rendere più visibili alcuni elementi rispetto ad altri.

Mobile first design: la navigazione da mobile - IMPRIMIS

Quando si progetta un sito web è importante inserire alcune funzionalità nelle zone più facili da raggiungere con le dita come ad esempio il centro dello schermo o la parte inferiore ed evitare di inserire elementi importanti nella parte più in alto.

Mobile user experience: a cosa dare importanza nella scheda prodotto

Quali sono allora gli elementi principali di un sito mobile first? Vediamo i più importanti:

1. Hamburger Menu

Questo menu è composto da tre linee orizzontali che ricordano un hamburger e ha diverse funzioni:

  • permette di rendere il sito pulito e fruibile,
  • permette di inserire vari elementi al suo interno, in modo da non distrarre gli utenti con troppe informazioni durante la navigazione nelle pagine più importanti,
  • consente di salvare spazio,
  • anche gli utenti più inesperti riconoscono questa icona.

2. Ricerca full text

Una delle prime azioni che compiono i visitatori è quella di digitare il nome del prodotto che cercano tramite la barra di ricerca.
Gli utenti, soprattutto quando utilizzano un cellulare per navigare, si aspettano velocità e immediatezza per arrivare ai prodotti desiderati.
Quando ottimizzi la ricerca, tieni conto anche dei possibili errori di battitura che da smartphone sono molto frequenti.

3.Immagini

In alcuni settori più che in altri, come ad esempio la moda e l’arredamento, le immagini dei prodotti sono fondamentali.
Fai in modo che siano chiare e nitide, in modo da mostrare tutte le caratteristiche degli articoli, puoi anche aggiungere valore ai tuoi prodotti mostrandoli nel loro ambiente naturale.

Mobile first design: la scheda prodotto

4. Disponibilità del prodotto

A seconda dei casi può riguardare la taglia, la variante o le misure disponibili.
Fai in modo che il tuo utente possa capire subito se è disponibile il prodotto che cerca. Un altro consiglio? Se il prodotto non è in magazzino richiedi la mail e avvisalo non appena il prodotto tornerà disponibile e lo conquisterai!

5. Bottone Acquista

Grande, visibile, facile da vedere e da cliccare.
Oltre ad essere grande per poter essere tappato facilmente, se lo renderai fisso potrà essere cliccato facilmente dall’utente in qualsiasi momento della navigazione.
L’ultima cosa che un visitatore deve fare è mettersi alla ricerca del tasto Aggiungi al carrello!

Non dimenticarti di questi elementi e il tuo cliente si ricorderà di te!

Vuoi metterti alla prova e testare le tue abilità di web design?
Prova questo simpatico test!

Questo è il nostro ultimo articolo prima del break estivo.
Ci prendiamo anche noi qualche giorno di riposo.

A presto con nuovi consigli per il tuo ecommerce. Buone vacanze!


Hai trovato utile questo articolo?

Scrivi un commento all'articolo

avatar
  Subscribe  
Notificami