4 modi per realizzare un layout di un sito web performante su mobile
Perché è importante realizzare un sito e-commerce con un design mobile friendly? Come creare il layout di un sito web responsive, adatto cioè a essere visualizzato da qualsiasi schermo o device? Proviamo a spiegarlo in questa guida analizzando alcuni elementi base per una UX efficace anche da mobile: pagina carrello con una grafica intuitiva e minimal in grado convertire bene, home page con box categorie di prodotti e offerte del mese, pagina checkout senza troppi dati da inserire, eliminazione di banner superflui e popup.
Cos’è il responsive design: come aumentare le vendite da mobile
Per essere fruibile ovvero navigabile da qualsiasi device (su un pc, un tablet o uno smartphone) il sito di un e-commerce deve avere un design responsive, dovrà essere capace cioè di adattarsi al comportamento dell’utente, alle sue preferenze e alle sue scelte. Sia che il cliente navighi sul tuo store online da un tablet, sia che decida di visitarlo da uno smartphone, ciò che conta è che tutte le pagine del tuo sito si leggano e si vedano bene: gli utenti non avranno quindi bisogno di ingrandire lo schermo o scorrere ininterrottamente tra i vari contenuti per trovare ciò che stanno cercando e non saranno costretti a una lettura sacrificata.
Il concetto del responsive design parte da un presupposto: il web è un unico spazio, ragione per cui non è necessario creare diverse versioni di un sito e-commerce, un sito responsive sarà infatti in grado di adattarsi a tutti i dispositivi, le piattaforme o dimensioni dello schermo garantendo sempre la massima fruibilità. Se come dimostrano i dati degli ultimi anni, sempre più persone fanno acquisti usando tablet e telefonini (superando quelli effettuati da desktop), allora è facile immaginare quale ruolo rivesta il layout di un sito web nel mondo dello shopping online e perché debba essere mobile friendly. Chiunque abbia un e-commerce sa bene quanto sia diventato importante avere siti ottimizzati per essere visualizzati correttamente su diverse tipologie di dispositivi mobili, l’obiettivo è anche in questo caso migliorare l’esperienza dell’utente e aumentare le vendite da mobile.
Come creare il layout di un sito mobile responsive
Attualmente la maggior parte dei siti web è progettata e realizzata per essere responsive, ma non è sempre stato così: fino a pochi anni fa, infatti, ai tempi dei primi smartphone sul mercato, per poter leggere un articolo o una scheda prodotto eravamo costretti a ingrandire o rimpicciolire lo schermo e scorrere tra un’infinità di contenuti e immagini spesso poco chiare. L’esperienza di navigazione non era delle migliori, anzi si rivelava spesso poco gratificante a tal punto da portare il potenziale acquirente ad abbandonare il sito: concludere l’acquisto era pressoché impossibile.
Oggi il carrello medio da mobile è invece in continuo aumento (nel 2022 secondo Payplug ha raggiunto i 94 euro contro i 77 del 2020), grazie a layout che si ridimensionano adattandosi allo schermo del dispositivo utilizzato, anche se il tasso di abbandono da smartphone è dell’83,76% superando quello da desktop (fonte Salecycle) per i motivi più svariati, come ad esempio un carrello poco fruibile da mobile. Ma come creare il layout di un sito navigabile anche da dispositivi mobili? Gli elementi da considerare sono diversi: dal peso delle immagini alla possibilità di poter leggere correttamente i testi o usare tutte le funzioni a disposizione, fino all’eliminazione di alcuni elementi poco adatti o funzionali a un’esperienza da mobile come popup o banner superflui.
Per creare un design responsive efficace esistono dei requisiti tecnici da rispettare:
- griglie fluide: sono quelle che consentono a un sito responsive di modificare le sue dimensioni in base al dispositivo su cui viene visualizzato;
- immagini e testi flessibili: immagini e testi devono poter adattare le proprie dimensioni ai diversi dispositivi su cui verranno visualizzati, così si adatteranno alle varie impaginazioni senza sovrapporsi tra loro o apparire illeggibili o sgranate;
- media queries: sono gli elementi che permettono la visualizzazione corretta di immagini e testi grazie all’uso di fogli di stile diversi in base al dispositivo usato.
Strategie per ottimizzare il layout di un e-commerce
Esistono inoltre diverse strategie per ottimizzare il layout di un e-commerce e aumentare le vendite da mobile. Eccone alcune che riguardano le pagine sulle quali agire.
- Il layout della pagina carrello
Una grafica pulita ed essenziale in grado di organizzare le varie informazioni in modo efficiente e razionale: ecco quello che ci vuole per avere un carrello agile che permetta agli utenti di aggiungere facilmente i prodotti anche dal proprio smartphone e andare dritti al checkout. Via gli elementi di troppo, un carrello intuitivo dovrà contenere le seguenti informazioni (poche, chiare e perfettamente leggibili):
- il nome e il prezzo del prodotto
- l’immagine dell’articolo ben visibile: chi acquista deve poter sapere in ogni momento cosa c’è all’interno del carrello
- la possibilità di modificare le quantità dei prodotti
- tutti i tipi di pagamento accettati
- garanzie per il cliente (reso o spedizione gratuita/ soddisfatti o rimborsati se presente/ sicurezza dei pagamenti)
- prezzo totale
- assistenza clienti
- indicazioni ben chiare che forniscano all’utente un’idea dello stato d’avanzamento del proprio acquisto.
- Checkout rapido e intuitivo
È la fase cruciale dell’intero processo, quella in cui il cliente finalizza l’acquisto compilando il classico modulo di registrazione. Ottimizzare la pagina del checkout per acquisti da mobile significa in questo caso evitare che gli utenti si imbattano in form inutilmente lunghi e superflui, che abbandonerebbero dopo poco: i clienti che comprano da telefonino non hanno né pazienza né tempo e non vogliono perderne ad inserire i propri dati. Ecco allora alcuni suggerimenti per rendere l’operazione del pagamento il più possibile rapida, fluida e semplice:
- il layout del form deve essere gradevole e intuitivo, facile da utilizzare anche dallo schermo di un cellulare;
- dare al cliente la possibilità di acquistare come ospite senza costringerlo a registrarsi al vostro e-commerce prima di poter acquistare;
- evitare dove possibile menu e prodotti correlati: meno fonti di distrazione saranno presenti, minore sarà la probabilità che l’utente non concluda l’acquisto;
- realizzare Call To Action chiare, facili da individuare e abbastanza grandi da toccare sui dispositivi touchscreen, senza il rischio di cliccare accidentalmente su altri elementi.
Meglio se sono ben evidenziate rispetto al resto del contenuto della pagina;
- dotarsi dei diversi metodi di pagamento
- offrire all’acquirente la possibilità di salvare i dati della propria carta di credito al primo acquisto sul tuo negozio online, così che non sia più necessario inserirli nuovamente al prossimo acquisto.
- testare il sito su diversi dispositivi e con reti differenti in modo da monitorarne via via le performance e eventualmente migliorarle. In base alla qualità della connessione infatti alcuni elementi potrebbero non essere visualizzati correttamente.
- Una home page essenziale
Un cliente deve poter trovare facilmente i prodotti di un e-commerce: ecco perché è importante realizzare homepage contenenti le principali categorie prodotto in evidenza o le offerte del mese. Per sapere quali siano quelle di maggior interesse per gli utenti e individuare quali rendere strategicamente evidenti in prima pagina ci si può aiutare con strumenti di Web Analytics.
- L’accesso rapido ai prodotti
Secondo un rapporto Google aggiornato al 2019, il 53% dei visitatori di un sito da mobile abbandona le pagine web che impiegano più di 3 secondi per caricarsi. La velocità di caricamento è quindi uno degli elementi più importanti su cui concentrarsi quando si tratta di ottimizzare un sito e-commerce per mobile, determina infatti la possibilità che un acquirente torni o meno sul vostro negozio online. Poter accedere rapidamente alle informazioni è una delle regole d’oro su come creare la grafica di un sito responsive: scorrere ininterrottamente il display del proprio cellulare nel tentativo di scegliere un prodotto contribuisce a creare stress e poco dopo l’abbandono del carrello. È importante quindi poter ridurre al minimo questi movimenti durante la scelta del prodotto da mobile: per farlo basta realizzare un design che in pochi scroll permetta all’utente di visualizzare tutte le informazioni necessarie alla sua scelta. Per questo sarà utile progettare e inserire nel layout una barra filtro prodotti da mantenere ben in evidenza e fissa, così che si possano aggiungere o rimuovere facilmente senza bisogno di cercare gli articoli scrollando più volte la schermata. Un ulteriore accorgimento potrebbe essere quello di prevedere una “wishlist/lista dei desideri” dove poter aggiungere i prodotti preferiti da controllare in un secondo momento e facile da consultare.
