260 miliardi di dollari: questa la non trascurabile somma che, secondo le indagini sul tasso di abbandono dei siti di e-commerce condotta dal Baymard Institute sui siti USA, si potrebbe recuperare anche solo ottimizzando l’esperienza di navigazione nella fase di checkout. Un utente su quattro abbandona il carrello a causa di un processo “troppo lungo / troppo complicato”: segno che, ancora oggi, non esiste la chimera del carrello perfetto. E che, con sudore e scienza, si possono migliorare i tassi di conversione, anche di uno spocchioso 35%. Senza spararle troppo grosse, in questa presentazione faremo un giro tra le cattive e le buone pratiche, per vedere come possiamo migliorare l’esperienza on line dei nostri clienti in questa fase nevralgica della loro navigazione. E, ovviamente, soddisfare le nostre ambizioni di performance.

1. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Nicola Bonora
Mentine - The re-design minded company
Watch out for checkout!
Padova,29settembre2017

2. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
DARIO
NICOLA
CARLO
Watch out for checkout
In coro!

3. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
DARIO
NICOLA
CARLO
UN GATTO
Watch out for checkout
In coro!

4. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
DARIO
NICOLA
CARLO
UN ALTRO
GATTO
Watch out for checkout
In coro!

5. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
260 billion $
si potrebbero recuperare
migliorando l’esperienza
di acquisto
Fonte: Baymard Institute
Watch out for checkout
“Numeri che fanno girare la testa”

6. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Agenda
Preludio
Funzionalità di base
Carrello
Registrazione
Cassa
Un occhio al futuro

7. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Watch out for checkout
Definisci “piacevole”
Fonte: Nieslen Norman Group
aspetti emotivi
aspetti funzionali

8. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Watch out for checkout
Tu chiamale, se vuoi.
Fonte: Nieslen Norman Group

9. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Controllale
funzionalità
dibase

10. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Controlla le funzionalità di base
Performance

11. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Controlla le funzionalità di base
Performance
“Cognitive Load
with Stressful Situations”

12. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
AMAZON:
100ms di ritardo significano l’1% di vendite perse (2008)
GOOGLE:
500ms di ritardo significano un calo di traffico del 20%
ALIEXPRESS:
riducendo del 36% i tempi di caricamento delle pagine ha
aumentato del 10,5% gli ordini e del 27% i tassi di conversione
sui nuovi clienti
Controlla le funzionalità di base
Performance

13. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Controlla le funzionalità di base
Performance
ANALIZZA LA TUA SITUAZIONE:
• testmysite.thinkwithgoogle.com
• gtmetrix.com
• www.webpagetest.org
• observatory.mozilla.org
• developers.google.com/web/tools/lighthouse

14. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
v
v
v
Controlla le funzionalità di base
Performance
< 1000 ms
1000 ms su connessione via cavo
3000 ms con connettività mobile 3G
5000 ms
1600 ms
DATTI UN OBIETTIVO (AMBIZIOSO):
SpeedIndex
Start rendering time
Time-to-interactive
First meaningful paint

15. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
OTTIMIZZA IL FRONT-END
• Inserisci il CSS critico nell’head della pagina
• Usa <defer> e <lazy-loading> per più script
che puoi
• Usa i suggerimenti per le risorse
(dns-lookup, preconnect, prefetch… etc.)
• Carica solo il subset di font che usi davvero
Controlla le funzionalità di base
Performance
• Ottimizza le immagini
• Controlla gli header http
• Abilita la compressione lato server
• Se disponibile usa HTTP2, abilita HPACK
• Usa più cache possibile
(anche i Service Workers se riesci)
…E ALTRI 20 CONSIGLI QUI:
www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/

16. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Da ottobre 2017 Google marchia come NON SICURI i siti che non utilizzano il
protocollo HTTPS e raccolgono dati sensibili
Controlla le funzionalità di base
Sicurezza
FONTE: https://blog.chromium.org/2017/04/next-steps-toward-more-connection.html

17. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Controlla le funzionalità di base
Sicurezza

18. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
NNgroup suggerisce di progettare pensando almeno a questi 5 tipi di utenti:
Controlla le funzionalità di base
User experience
FOCALIZZATI SUL PRODOTTO
DO SOLO UN’OCCHIATA
RICERCATORI
CACCIATORI D’OFFERTE
UNA-SHOPPER

19. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
OBIETTIVO:
Rapidità: so cosa voglio, e lo voglio adesso
FUNZIONALITÀ CHIAVE:
• Scheda prodotto con nomi chiari e immagini
di qualità
• Ricerca ottimizzata per l’identificazione rapida
del giusto prodotto
• Accesso semplificato a prodotti acquistati in
precedenza
• Checkout semplificato per concludere
l’ordine nel minor tempo possibile
Controlla le funzionalità di base
User experience
FOCALIZZATI SUL PRODOTTO

20. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
OBIETTIVO:
Ispirazione: vedere cosa c’è di nuovo, cosa è
cambiato, ammazzare il tempo
FUNZIONALITÀ CHIAVE:
• Pagine lista della novità, più venduti e offerte
• Accesso facile alle novità tramite link correlati
e prodotti consigliati
• Possibilità di condividere i prodotti che
piacciono
Controlla le funzionalità di base
User experience
DO SOLO UN’OCCHIATA

21. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
OBIETTIVO:
Acquisto consapevole : acquisizione di
conoscenza ampia e completa
FUNZIONALITÀ CHIAVE:
• Scheda prodotto chiare e dettagliate
• Linguaggio facile da comprendere
• Recensioni degli utenti
• Wishlist o carrelli persistenti
Controlla le funzionalità di base
User experience
RICERCATORI

22. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO

23. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
OBIETTIVO:
Il miglior affare
FUNZIONALITÀ CHIAVE:
• Una sezione dedicata alle offerte
• Mostrare il prezzo originale, il prezzo scontato
e il risparmio in modo chiaro
• Inserimento di coupon o codice sconto
semplificato
• Applicazione automatica di sconti quando
vengono raggiunti i criteri
Controlla le funzionalità di base
User experience
CACCIATORI D’OFFERTE

24. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
OBIETTIVO:
Acquistare una volta
FUNZIONALITÀ CHIAVE:
• Navigazione chiara
• Schede prodotto complete
• Informazioni sull’azienda chiare e credibili
• Check-out come ospite
Controlla le funzionalità di base
User experience
UNA-SHOPPER

25. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Ti ricordi quello che ti abbiamo detto l’anno scorso?
È ancora valido!
Controlla le funzionalità di base
Usabilità delle form

26. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Ai campi della vostra form applicate la regola TTSS:
Taglia Tieni Sposta Spiega
Come organizzare i dati
Fonte: https://twitter.com/cjforms/status/129160080150106112

27. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
HAI DAVVERO
BISOGNO
DEL DATO?
Taglia
NO
Come organizzare i dati

28. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
HAI DAVVERO
BISOGNO
DEL DATO?
Taglia
È UN
DATO
SENSIBILE?
Tieni
NO
Come organizzare i dati
NO
SI

29. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
HAI DAVVERO
BISOGNO
DEL DATO?
Taglia
È UN
DATO
SENSIBILE?
Tieni
NE HO
BISOGNO
ORA?
Sposta
NO
Come organizzare i dati
NO NO
SI SI

30. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
HAI DAVVERO
BISOGNO
DEL DATO?
Taglia
È UN
DATO
SENSIBILE?
Tieni
NE HO
BISOGNO
ORA?
Sposta
NO
Come organizzare i dati
NO NO
Spiega
SI SI SI

31. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Controlla le funzionalità di base
Mobile

32. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Our number one priority is:
we need to build experiences
that capitalize on mobile.
Rich Jones
ResponsabileprodottoeUX
ASOS
Controlla le funzionalità di base
Mobile
80%
DI TRAFFICO SU MOBILE IN UK
70% A LIVELLO INTERNAZIONALE
70%
DI VENDITE DA MOBILE IN UK
58% A LIVELLO INTERNAZIONALE
FONTE: http://www.glossy.co/the-move-to-mobile/how-asos-gets-50-percent-of-customers-to-buy-on-mobile

33. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Carrello

34. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Carrello
Rendi il carrello facilmente editabile (se puoi, fai a meno del tasto “Aggiorna il
carrello” e fai aggiornamenti in tempo reale)

35. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
. Preseleziona la modalità di spedizione più economica per il cliente
. Mostra la data di consegna e non i tempi
Carrello

36. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Attenzione alla FOMO (fear of missing out)
Carrello

37. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione

38. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione
Registrazione vs. Check-out come ospite
VANTAGGI REGISTRAZIONE:
• Database di utenti per il mail
marketing (che in Italia ha tassi
di conversione alti)
• Possibilità per gli utenti di salvare i
dati e semplificare le operazioni di
riacquisto
SVANTAGGI REGISTRAZIONE:
• Non tutti gli utenti vogliono
“avere una relazione duratura”
con voi
• Il processo di registrazione è più
complesso (rischio di
abbandono)

39. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione
Registrazione vs. Check-out come ospite

40. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione
Registrazione vs. Check-out come ospite

41. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione
Registrazione vs. Check-out come ospite
• Considera il tuo business da un punto di vista olistico
• Sii data-informed e non data-driven: prendi le migliori decisioni sulla base dei
dati che hai a disposizione
• Le ottimizzazioni iterative hanno una spinta propulsiva che si esaurisce nel
tempo

42. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione
Massimo locale vs. Massimo globale

43. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Se avessi chiesto ai miei clienti
cosa volevano, mi avrebbero
risposto […]
Henry Ford
Controlla le funzionalità di base
Mobile

44. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
Correva l’anno FORM PIÙ
USABILI.

45. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione
Obiettivi degli utenti

46. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione
Obiettivi degli utenti

47. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione
Obiettivi degli utenti

48. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione
Obiettivi degli utenti

49. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Registrazione
Obiettivi degli utenti

50. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Cassa

51. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
SUGGERIMENTI
• Separa il flusso in più passaggi (meglio se in una sola pagina, ma dipende)
• Chiedi solo le informazioni necessarie
• Mostra le funzionalità aggiuntive solo su richiesta (creazione account, codice sconto, etc.)
• Fai qualsiasi cosa sia utile ad evitare l’inserimento dei dati da parte dell’utente (auto-
completamento, ripetizione automatica, etc…)
• Fai in modo che il feedback per ogni azione sia chiaro
Cassa

52. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Cassa

53. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Unocchio
alfuturo

54. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Un occhio al futuro
Realtà aumentata

55. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Un occhio al futuro
Acquisti ripetuti

56. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Un occhio al futuro
Paga con la faccia

57. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO

58. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Nicola Bonora
Mentine - The re-design minded company
Watch out for checkout!
Padova,29settembre2017