5 elementi chiave per ottimizzare le landing page mobile

Oggi facciamo un passo in più, restringendo il campo d’azione: scopriremo come strutturare al meglio una landing page mobile – partendo dalle ragioni per cui vale la pena investirvi tempo e attenzione.

Sai bene che in una landing page ciascun elemento deve essere calibrato e perfezionato al millimetro per garantire un unico obiettivo – che l’utente compia l’azione desiderata. Che si tratti di iscriversi alla newsletter, di prenotare un appuntamento, di scaricare un ebook o di qualunque altra azione, la landing page ha poco spazio e poco tempo per portare l’utente direttamente lì: alla conversione.

Non si tratta di un compito semplice. E lo è ancora meno quando si tratta di far ciò sui dispositivi mobili, dove tutto è ridotto al minimo: lo spazio sullo schermo, la leggibilità, l’attention span del lettore, spesso la batteria, altrettanto spesso la potenza della connessione. Sono temi che abbiamo trattato a fondo nella Video Academy dedicata al Mobile Marketing, che valgono per le app e doppiamente per le landing page.

Gli SMS hanno un enorme potenziale (ne abbiamo parlato anche in questo post), ma anche qualche indiscutibile limite. Due tra i principali sono il vincolo dei 160 caratteri (espandibile con MailUp a 480) e la grafica standardizzata. Il loro scopo è aprire una breccia nel destinatario e spingerlo ad approfondire il contenuto. Come dare continuità a questi due momenti? Con una landing page mobile, da linkare nell’SMS tramite un url accorciato.

Questo è il modo migliore per dispiegare al massimo il potenziale degli SMS: fornir loro una pagina di appoggio che sia graficamente più piacevole, stilisticamente più in linea con la brand identity e contenutisticamente più ricca di dettagli. Tutto questo al fine di aiutare le conversioni. Dove? Su mobile, naturalmente. Più avanti nel post scopriremo come costruire una landing page per gli SMS – in concreto.

Ottimizzare le landing page mobile, dunque, è un’operazione tanto necessaria quanto complessa e delicata. Che sia essenziale ce lo dicono i dati. Secondo l’Osservatorio Mobile B2C del Politecnico di Milano (Osservatori.net), in Italia lo smartphone catalizza il traffico di circa il 70% degli utenti internet complessivi almeno una volta al mese (con una crescita a doppia cifra rispetto all’anno precedente) e più del 60% del tempo speso online.

Non solo: per il 50% di chi naviga da mobile, lo smartphone ha soppiantato il PC, mentre per il 38% i due schermi hanno la stessa rilevanza.

Il traffico viaggia su mobile…

I numeri di Osservatori.net sono confermati dai dati globali registrati dal Monetate Ecommerce Quarterly Report Q4 2016. In dodici mesi, come si evince dallo schema, la quota di visite ai siti e-commerce provenienti da desktop è scesa dell’11%, mentre da smartphone è cresciuta del 13% (in lieve flessione invece i tablet, la cui visualizzazione delle landing page si avvicina tuttavia di più a quella su desktop). La forbice non dà segnali di inversione di tendenza, e non possiamo aspettarci altro che un solco sempre più marcato tra le performance dei device.

… ma le conversioni non tengono il passo

Il traffico mobile erode quello desktop, eppure i tassi di conversione non sembrano riuscire a stare dietro a questa tendenza. Le conversioni da smartphone (sempre secondo Monetate Ecommerce Quarterly Report Q4 2016) pesano ancora molto meno di quelle che avvengono sui siti desktop e su tablet (per quanto il trend sia comunque positivo).

Il problema non si limita agli e-commerce (dove tuttavia questo tema è particolarmente acuto), ma si applica a business di tipologie diverse. I motivi di questo fenomeno sono diversi, ma possiamo sommariamente ridurli a un grande macro-tema: una user experience mobile ancora lontana dall’essere soddisfacente. I dati di iAcquire, raccolti insieme a SurveyMonkey, lo dicono chiaro: il 40% degli utenti sceglierà un altro risultato di ricerca se il sito non è mobile friendly.

Non basta dotarsi di un sito responsive – anche se questo è ovviamente il primo passo, ed è fondamentale. Per migliorare le performance occorre ripensare contenuti e layout specificatamente per fruizione mobile – il cosiddetto approccio mobile first. Tutti abbiamo esperienza dei fattori che ci fanno abbandonare un sito, quando lo apriamo su smartphone:

• La pagina non si carica
• La leggibilità è ostica
• Non trovo subito le informazioni che mi servono
• La fruizione è impedita da pop-up, text overlay (come disclaimer cookie particolarmente ingombranti), rich media che si impongono a tutto schermo, e altri contenuti invadenti e non voluti
• Troppi scroll mi separano dalla call-to-action, ovvero dalla possibile soluzione al mio problema

E così via. Elementi che possono funzionare benissimo su desktop (come i box di pop-up per l’iscrizione alla newsletter, una pratica che raccomandiamo spesso) possono rivelarsi un boomerang su mobile.

Ecco quindi alcuni elementi a cui prestare particolare attenzione – in aggiunta naturalmente (e non in sostituzione) alle best practice generali individuate in questo articolo. Obiettivo finale: eliminare tutte le possibili barriere dalla user experience. In una parola, mirare a essere il più possibile frictionless.

1. Velocità di caricamento

Una pagina lenta a caricarsi è tra i peggiori autogoal dei brand. Noi tutti, in quanto utenti, sappiamo quanto poco basti per spazientirci e chiudere la finestra del browser. Questa percezione data dell’esperienza è tradotta in numeri dai dati Kinsta: il 74% degli utenti abbandona i siti web che non si caricano entro 5 secondi.

[twitter_quote text=”Il 74% degli utenti abbandona i siti web che non si caricano entro 5 secondi” text_twitter=”Il 74% degli utenti abbandona i siti web che non si caricano entro 5 secondi” image_twitter=”https://blog.mailup.it/wp-content/uploads/twitter_icon.png” subtitle=”” image=””]

E non è tutto. Questi dati Soasta mostrano la correlazione tra velocità di caricamento della pagina e tasso di conversione: l’andamento comincia a crollare già prima dei 3 secondi. Un’ulteriore riprova di quanto sia fondamentale garantire alle landing page mobile un upload rapido ed efficiente, in tempi inferiori ai 3-4 secondi. Un solo secondo in più può fare la differenza (in negativo).

L’ideale sarebbe tenere il peso della landing page mobile sotto i 20 KB. I metodi per ridurre il peso delle pagine e quindi aumentarne la velocità di upload sono diversi:

• Ottimizzare le immagini, controllandone il peso, ad esempio usando TinyPNG
• Ridurre i file HTML e CSS, utilizzando sistemi di compressione come Gzip
• Minimizzare i file CSS e JS, utilizzando tool come CSS Minifier
• Ottimizzare la risposta del server all’invio dei dati, scegliendo quali file comprimere e quali escludere

Esistono inoltre numerosi strumenti per testare il peso e la velocità di upload delle landing page, tra cui:

• Google PageSpeed Insights
• WebPageTest
• GTmetrix
• Mobitest
• mobiReady

2. Contenuti veloci, chiari, dritti al punto

Premesse:

• Su mobile, l’utente deve trovare immediatamente ciò che cerca. Se non capisce cosa fai o cosa vendi, chiude la pagina.
• Lo spazio sullo schermo dello smartphone è poco. Quindi bisogna occuparlo bene.

La riflessione sui contenuti da inserire in una landing page mobile, quindi, si muove in due direzioni parallele:

• Qualità: occorre lavorare su copy estremamente efficaci, chiari e compelling. In una sola occhiata, devi essere in grado di convincere l’utente a fidarsi di te e a cliccare sul bottone di CTA. Questo vale sia per il titolo che per la call-to-action.
• Quantità: la missione è creare un messaggio che sia ben leggibile (quindi font medio-grande) e che stia nel poco spazio a disposizione (uno scroll, quindi conciso).

Attenzione anche a eventuali errori di resa nel ridimensionamento responsive. Ad esempio, un background fotografico può inficiare la leggibilità del testo su mobile, se il copy si sposta su una parte dell’immagine troppo chiara.

3. Bottone click-to-call

Il comportamento degli utenti su mobile si caratterizza per quelli che vengono definiti micromomenti – e che abbiamo discusso approfonditamente nelle video-pillole dedicate al Mobile Marketing. L’utente oggi utilizza internet con finalità specifiche: vuole risposte e indicazioni precise relativamente a necessità immediate. Il brand che sa farsi trovare ed essere d’aiuto in questo preciso micromomento sarà prescelto dall’utente – altrimenti la finestra di possibile interazione si chiuderà.

I dati Google ci dicono che, in questo contesto, le funzionalità di click-to-call – ovvero la possibilità di far partire una telefonata cliccando sulla CTA – stanno acquisendo sempre maggior rilievo.

Se l’obiettivo della landing page è vendere un prodotto o far prendere un appuntamento, l’inserimento di un pulsante che consenta di telefonare al brand farà la differenza nell’esperienza dell’utente. Rendendo realmente utile la landing page.

Un esempio pratico: sono le 13, sono fuori ufficio, voglio pranzare. Cerco un ristorante dallo smartphone. Chi mi avrà come cliente, tra le decine di risultati nella SERP? Il locale che, oltre a mostrarmi belle foto e dettagliarmi il menù, arricchirà la sua landing page di un bottone tramite cui telefonare e prenotare. Oppure un bottone che apra il percorso su Google Maps. Più semplice e utile è l’esperienza utente, maggiori saranno le conversioni.

(P.S. Il bottone di click-to-call è facilissimo da inserire nelle landing page con l’editor MailUp!)

4. Header e footer fissi

Mantenere gli elementi fondamentali all’interno del primo scroll è, come già menzionato, una buona pratica. Può darsi il caso, tuttavia, che il contenuto non si esaurisca lì, e che l’utente si trovi a navigare in punti lontani dalla CTA principale. In questo caso può essere di grande utilità inserire header e footer fissi (sticky in inglese), che rimangono cioè visibili anche quando l’utente si muove nel sito o scende nello scroll.

La scelta di header/footer fisso risponde anche all’altra priorità di UX: dare all’utente ciò che cerca nel modo più veloce. Una ricerca di Smashing Magazine, in particolare, ha evidenziato come la velocità nel reperimento delle informazioni aumentasse del +22% in presenza di header e footer fissi. Una percentuale difficile da ignorare.

5. CTA facile da raggiungere

Il modo in cui teniamo in mano lo smartphone detta la posizione che dovrebbe avere la CTA sullo schermo, in modo da renderla facilmente raggiungibile (e quindi cliccabile) in qualunque circostanza. Secondo UXmatters, queste sono le principali posizioni delle mani nel sorreggere e utilizzare il device:

Secondo il medesimo studio, il 49% degli utenti tiene e utilizza lo smartphone con una mano sola. L’immagine sotto è la rappresentazione grafica di come sia cambiato negli anni lo schermo dell’iPhone, e di conseguenza quale sia la zona raggiungibile dal pollice in modo naturale.

[twitter_quote text=”Il 49% degli utenti utilizza lo smartphone con una mano sola: occorre ottimizzare la posizione della CTA” text_twitter=”Il 49% degli utenti utilizza lo smartphone con una mano sola: occorre ottimizzare la posizione della CTA” image_twitter=”https://blog.mailup.it/wp-content/uploads/twitter_icon.png” subtitle=”” image=””]

Tenere questo schema a mente è fondamentale nel momento in cui viene deciso il layout grafico della landing page, in modo da posizionare la CTA nel punto più agevole da cliccare.

Con l’editor drag & drop di MailUp, creare una pagina ottimizzata per mobile è una questione di semplici operazioni di trascinamento e rilascio. Avrai tutto lo spazio che serve per includere dettagli su prodotti, servizi, eventi, concorsi, regolamenti e molto altro. Non dovrai preoccuparti per la resa su smartphone, perché il codice è già ottimizzato per questo fine.

Nella progettazione di un buona user experience è fondamentale l’aspetto grafico, la capacità di garantire continuità e uniformità nel layout, nel passaggio da diversi canali e touchpoint. L’editor di MailUp consente un elevato grado di personalizzazione della landing page, per uniformarla graficamente agli altri canali e rendere sempre riconoscibile il tuo brand: dallo sfondo alla call to action, puoi definire ogni elemento di design.

Una volta creata la landing page, ricorda sempre di accorciare l’URL con la funzione di shortening, per risparmiare caratteri e avere maggior spazio per il testo.

1. Scegli un modello tra quelli disponibili
2. Personalizza la landing page mobile inserendo logo, immagini, blocchi di testo e CTA
3. Definisci l’azione delle CTA: puoi scegliere tra quattro diverse opzioni (apri pagina web, invia email, fai una chiamata, invia SMS)
4. Salva la landing page e linkala nei tuoi SMS

Assicurarsi che il proprio sito sia mobile responsive non è più sufficiente. Occorre pensare le landing page in ottica mobile first, mettendo in atto qualche accorgimento:

• Ottimizzare la velocità di caricamento della pagina
• Dar forma a copy chiari, brevi e immediatamente efficaci
• Inserire bottoni di click-to-call e altre CTA interattive
• Dare un appiglio durante la navigazione grazie a header e footer fissi
• Assicurarsi che il bottone di CTA sia facilmente raggiungibile e cliccabile