O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
InternetDays3ottobre2013
Conversion Oriented Design: da visitatori a clienti soddisfatti
Antonio Bonanno - Cristina Viganò...
Internet Days 3 ottobre 2013
Chisiamo
Antonio Bonanno
Managing Partner
@antoniobonanno
Cristina Viganò
UX Researcher
@crvi...
InternetDays2ottobre2013
BUSINESS SVILUPPO
UX DESIGN
Internet Days 3 ottobre 2013
Agenda–Dicosaparleremooggi?
Persuasive
Technology
2
Come Creare una
Landing Page
5
Why Conver...
Internet Days 3 ottobre 2013
Conversation
#DesignToConvert
#InternetDays
Internet Days 3 ottobre 2013
Why Conversion Oriented Design?
Internet Days 3 ottobre 2013
• perdita di interesse
• senso di confusione
• descrizione poco chiara del prodotto
• home pa...
Internet Days 3 ottobre 2013
COSA SERVE?
Conoscenzadeiprincipi
Esperienza
Competenzanell’usodimetodi
estrumenti
Internet Days 3 ottobre 2013
Conversion Oriented Design
Insieme di processi e
strumenti improntato al
raggiungimento di un...
Internet Days 3 ottobre 2013
Persuasive Technology
Internet Days 3 ottobre 2013
Strumento MezzoAttore sociale
RIDUZIONE
CONDIZIONAMENTO
PERSONALIZZAZIONE
SUGGERIMENTO
AUTOMO...
Internet Days 3 ottobre 2013
RIDUZIONE
Semplificareleazioni:
“buywithoneclick”
Lessismore:menopossibilità
disceltarendeipr...
Internet Days 3 ottobre 2013
Unbounce, 2013
+78%conversioni
Internet Days 3 ottobre 2013
STIMATA SUPERFICIALE
GUADAGNATAPRESUNTA
Social proof Look and feel
Brand UX
CREDIBILITÀ
Per e...
Internet Days 3 ottobre 2013
User Centered Design
Internet Days 3 ottobre 2013
Definizione di UCD
Usercentereddesignèilprocesso
diprogettazionecheponealcentro
diognipassoib...
Internet Days 3 ottobre 2013
1 Personas/Scenario
2 Architettura dell’Informazione/Flussi
3 Sketch/Wireframe
4 Visual Desig...
Internet Days 3 ottobre 2013
PERSONAS/SCENARIO
Le personas sono archetipi
che identificano e tratteggiano
comportamenti, d...
Internet Days 3 ottobre 2013
ARCHITETTURA
DELL’INFORMAZIONE
L'AI è la struttura organizzativa
logica e semantica
delle inf...
Internet Days 3 ottobre 2013
SKETCH
Astrazioni a fedeltà molto bassa
del layout, che hanno lo scopo
di rappresentare al me...
Internet Days 3 ottobre 2013
PROTOTIPAZIONE
Un prototipo è un modello
approssimato o parziale
del sistema che consente di:...
Internet Days 3 ottobre 2013
WIREFRAME
Rappresentazione ad alta fedeltà
della struttura del sistema,
che permette di:
• ot...
Internet Days 3 ottobre 2013
VISUAL DESIGN
• Look & Feel
• Colori
• Tipografia
• Icone
Internet Days 3 ottobre 2013
TEST UTENTE
Valutano l'efficacia, l'efficienza e
la soddisfazione con le quali gli
utenti rag...
Internet Days 3 ottobre 2013
Conversion Oriented Design
Internet Days 3 ottobre 2013
E-COMMERCE LANDING PAGES
COD - Cosa comprende?
Internet Days 3 ottobre 2013
LANDING PAGE
L'obiettivo di una landing page
è fare in modo che quanti più
navigatori arrivin...
Internet Days 3 ottobre 2013
44% 62% 55%
La percentuale dei click
per aziende B2B diretti
ancora a una home page
invece ch...
Internet Days 3 ottobre 2013
48% 85% 83%
Percentuale dei
responsabili marketing
che creano una landing
page per ogni nuova...
Internet Days 3 ottobre 2013
Come progettare una landing page?
Internet Days 3 ottobre 2013
DESIGN
Beauty:unalandingpagedeve
avereunottimolookandfeel,dotato
diunforteimpattoemotivo.
Internet Days 3 ottobre 2013
DESIGN
Beauty
Encapsulation:creareunacornice
intornoallaCTAevitachelosguardo
delvisitatoresia...
Internet Days 3 ottobre 2013
DESIGN
Beauty
Encapsulation
Contrastandcolor:utilizzarecolori
contrastantiperlaCTAaiutaadarle...
Internet Days 3 ottobre 2013
DESIGN
Beauty
Encapsulation
Contrastandcolor
Directionalcues:frecceealtri
patternpossonoesser...
Internet Days 3 ottobre 2013
DESIGN
Beauty
Encapsulation
Contrastandcolor
Directionalcues
Whitespace:utilizzarespazi
bianc...
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenzaescarsità:ilprocesso
decisionaleèacceleratodalla
percezionediaverepocotempo
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenzaescarsità
Trybeforeyoubuy:poterprovareil
prodottoprimadicomprarlo
aumentala...
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenzaescarsità
Trybeforeyoubuy
Socialproof:lacredibilitàdel
prodottoèaumentatada...
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenzaescarsità
Trybeforeyoubuy
Socialproof
Quantitàdiinformazione:l’utente
habis...
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenzaescarsità
Trybeforeyoubuy
Socialproof
Quantitàdiinformazione
Testimonials:o...
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenzaescarsità
Trybeforeyoubuy
Socialproof
Quantitàdiinformazione
Testimonials
F...
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenzaescarsità
Trybeforeyoubuy
Socialproof
Quantitàdiinformazione
Testimonials
F...
A/B testing
Questo è il metodo principale
che permette di ottimizzare
una landing page,
confrontando le diverse
variazioni...
Internet Days 3 ottobre 2013
Case study
Internet Days 3 ottobre 2013
MARCHIO IN
EVIDENZA
BANNER CHE
CATTURA
L’ATTENZIONE
GIUSTA
QUANTITÁ DI
INFORMAZIONI
CALL TO
A...
Internet Days 3 ottobre 2013
ULTERIORI
INFORMAZIONI
TRY BEFORE
YOU BUY
TESTIMONIALS
SPECIFICAZIONE
DEI VANTAGGI
RIPETIZION...
Internet Days 3 ottobre 2013
MARCHIO
BEN VISIBILE
CALL TO
ACTION IN
EVIDENZA IMMAGINI
EMOZIONALI
Internet Days 3 ottobre 2013
CALL TO
ACTION
GIUSTA
QUANTITÁ DI
INFORMAZIONI
IMMAGINI
EMOZIONALI
CALL TO
ACTION
Internet Days 3 ottobre 2013
BRAND
BEN VISIBILE
PIÙ IMMAGINI
INVECE DI UNA UNICA
MAGGIORE QUANTITÀ
DI INFORMAZIONI
Internet Days 3 ottobre 2013
Per concludere
Uncattivodesigncausaladiminuzionedellevendite
IlCODmassimizzailnumerodiconversioni
Lelandingpagessonounostrumentoancorapoc...
InternetDays2ottobre2013
Ditecilavostra
InternetDays2ottobre2013
Grazie!
InternetDays2ottobre2013
www.digitalnatives.it
Próximos SlideShares
Carregando em…5
×

Conversion Oriented Design

Come trasformare un utente in cliente con le tecniche del design dell'esperienza, user-centered e conversion-oriented.

  • Seja o primeiro a comentar

Conversion Oriented Design

  1. 1. InternetDays3ottobre2013 Conversion Oriented Design: da visitatori a clienti soddisfatti Antonio Bonanno - Cristina Viganò Milano, 3 ottobre 2013
  2. 2. Internet Days 3 ottobre 2013 Chisiamo Antonio Bonanno Managing Partner @antoniobonanno Cristina Viganò UX Researcher @crvigano
  3. 3. InternetDays2ottobre2013 BUSINESS SVILUPPO UX DESIGN
  4. 4. Internet Days 3 ottobre 2013 Agenda–Dicosaparleremooggi? Persuasive Technology 2 Come Creare una Landing Page 5 Why Conversion Oriented Design? 1 User Centered Design 3 Conversion Oriented Design 4 Case study 6
  5. 5. Internet Days 3 ottobre 2013 Conversation #DesignToConvert #InternetDays
  6. 6. Internet Days 3 ottobre 2013 Why Conversion Oriented Design?
  7. 7. Internet Days 3 ottobre 2013 • perdita di interesse • senso di confusione • descrizione poco chiara del prodotto • home page complicata • alto numero di link • navigazione difficoltosa CATTIVO DESIGN UTENTE POCO SODDISFATTO RIDUZIONE VENDITE • riduzione dei click • perdita di fiducia nel brand COD–Perchéserve?
  8. 8. Internet Days 3 ottobre 2013 COSA SERVE? Conoscenzadeiprincipi Esperienza Competenzanell’usodimetodi estrumenti
  9. 9. Internet Days 3 ottobre 2013 Conversion Oriented Design Insieme di processi e strumenti improntato al raggiungimento di uno specifico obiettivo di business. User Centered Design Persuasive Technology COD–Cos’è?
  10. 10. Internet Days 3 ottobre 2013 Persuasive Technology
  11. 11. Internet Days 3 ottobre 2013 Strumento MezzoAttore sociale RIDUZIONE CONDIZIONAMENTO PERSONALIZZAZIONE SUGGERIMENTO AUTOMONITORAGGIO SORVEGLIANZA GUIDA OGGETTI CAUSA-­‐EFFETTO AMBIENTI FATTORE  FISICO FATTORE  PSICOLOGICO LINGUAGGIO DINAMICHE  SOCIALI RUOLI  SOCIALI Tecnologia persuasiva
  12. 12. Internet Days 3 ottobre 2013 RIDUZIONE Semplificareleazioni: “buywithoneclick” Lessismore:menopossibilità disceltarendeiprocessidecisionali piùsemplici
  13. 13. Internet Days 3 ottobre 2013 Unbounce, 2013 +78%conversioni
  14. 14. Internet Days 3 ottobre 2013 STIMATA SUPERFICIALE GUADAGNATAPRESUNTA Social proof Look and feel Brand UX CREDIBILITÀ Per essere persuasivo, un sito deve innanzitutto essere credibile e ispirare fiducia. CREDIBILITÀ
  15. 15. Internet Days 3 ottobre 2013 User Centered Design
  16. 16. Internet Days 3 ottobre 2013 Definizione di UCD Usercentereddesignèilprocesso diprogettazionecheponealcentro diognipassoibisogni,idesideri eilimitidell’utente. UCDpermettelamassimizzazione dellauserexperience.
  17. 17. Internet Days 3 ottobre 2013 1 Personas/Scenario 2 Architettura dell’Informazione/Flussi 3 Sketch/Wireframe 4 Visual Design 5 Prototipazione/Test Utente Processo di User-centered Design
  18. 18. Internet Days 3 ottobre 2013 PERSONAS/SCENARIO Le personas sono archetipi che identificano e tratteggiano comportamenti, desideri ed aspettative di un gruppo specifico di utenti. Realizzate attraverso: • analitiche • ricerche di mercato • giudizio di esperti
  19. 19. Internet Days 3 ottobre 2013 ARCHITETTURA DELL’INFORMAZIONE L'AI è la struttura organizzativa logica e semantica delle informazioni e dei contenuti presenti all'interno del sistema. Findability: classificazione ed organizzazione dei contenuti in modo che siano trovabili dall’utente nella maniera più veloce ed intuitiva.
  20. 20. Internet Days 3 ottobre 2013 SKETCH Astrazioni a fedeltà molto bassa del layout, che hanno lo scopo di rappresentare al meglio il concept, le caratteristiche principali e le diverse alternative di design.
  21. 21. Internet Days 3 ottobre 2013 PROTOTIPAZIONE Un prototipo è un modello approssimato o parziale del sistema che consente di: • mantere il design centrato sull’utente • sperimentare design alternativi • superare il problema della definizione parziale dei requisiti
  22. 22. Internet Days 3 ottobre 2013 WIREFRAME Rappresentazione ad alta fedeltà della struttura del sistema, che permette di: • ottenere un rapido feedback sul progetto • identificare subito problemi legati alla disposizione e all’importanza degli elementi • apportare modifiche in modo più semplice ed economico
  23. 23. Internet Days 3 ottobre 2013 VISUAL DESIGN • Look & Feel • Colori • Tipografia • Icone
  24. 24. Internet Days 3 ottobre 2013 TEST UTENTE Valutano l'efficacia, l'efficienza e la soddisfazione con le quali gli utenti raggiungono determinati obiettivi di utilizzo del sistema. Consentono di: • identificare criticità e colli di bottiglia dell'interfaccia • comprendere meglio aspettative e comportamenti dell’utente
  25. 25. Internet Days 3 ottobre 2013 Conversion Oriented Design
  26. 26. Internet Days 3 ottobre 2013 E-COMMERCE LANDING PAGES COD - Cosa comprende?
  27. 27. Internet Days 3 ottobre 2013 LANDING PAGE L'obiettivo di una landing page è fare in modo che quanti più navigatori arrivino sulla pagina e seguano l'invito a compiere una "azione": l'indice di efficienza viene chiamato "tasso di conversione".
  28. 28. Internet Days 3 ottobre 2013 44% 62% 55% La percentuale dei click per aziende B2B diretti ancora a una home page invece che a una landing page.* La percentuale di aziende con 6 o meno landing pages.* La percentuale di aumento dei clienti raggiunti quando il numero di landing pages é portato a 16 o più.** *Hubspot, 2013; **Marketing Sherpa, 2013 Overview sull’uso delle landing pages
  29. 29. Internet Days 3 ottobre 2013 48% 85% 83% Percentuale dei responsabili marketing che creano una landing page per ogni nuova campagna.* Percentuale dei responsabili marketing che vogliono dare più importanza alle landing pages nel 2014.* Percentuale dei responsabili marketing, tra coloro che usano landing pages, che dichiarano di sentirsi sicuri di sé nel loro approccio.* Vantaggio competitivo? Ma non per molto... *Marketing Sherpa, 2013
  30. 30. Internet Days 3 ottobre 2013 Come progettare una landing page?
  31. 31. Internet Days 3 ottobre 2013 DESIGN Beauty:unalandingpagedeve avereunottimolookandfeel,dotato diunforteimpattoemotivo.
  32. 32. Internet Days 3 ottobre 2013 DESIGN Beauty Encapsulation:creareunacornice intornoallaCTAevitachelosguardo delvisitatoresiadistrattodaaltri elementi
  33. 33. Internet Days 3 ottobre 2013 DESIGN Beauty Encapsulation Contrastandcolor:utilizzarecolori contrastantiperlaCTAaiutaadarle maggiorrisaltoeacatturare l’attenzionedell’utente
  34. 34. Internet Days 3 ottobre 2013 DESIGN Beauty Encapsulation Contrastandcolor Directionalcues:frecceealtri patternpossonoessereusatiper indirizzarelosguardodell’utente sullaCTA
  35. 35. Internet Days 3 ottobre 2013 DESIGN Beauty Encapsulation Contrastandcolor Directionalcues Whitespace:utilizzarespazi bianchiperraggruppare l’informazioneevita l’appesantimentograficodella pagina
  36. 36. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità:ilprocesso decisionaleèacceleratodalla percezionediaverepocotempo
  37. 37. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy:poterprovareil prodottoprimadicomprarlo aumentalafiduciadell’utenteela probabilitàdiconversione
  38. 38. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy Socialproof:lacredibilitàdel prodottoèaumentatadalparere positivodialtriutenti
  39. 39. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy Socialproof Quantitàdiinformazione:l’utente habisognodiinformazioneper scegliere,matroppotestopuò essereoverwhelming
  40. 40. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy Socialproof Quantitàdiinformazione Testimonials:oltrechedalsocial proof,lacredibilitàèaumentatadalla garanziachealtreaziende importantinelsettorefaccianouso delprdotto
  41. 41. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy Socialproof Quantitàdiinformazione Testimonials Form:lasemplicitàdella compilazionedelformè fondamentalepernonfrenarela conversionedell’utente
  42. 42. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy Socialproof Quantitàdiinformazione Testimonials Form Sharing:incentivarelacondivisione dellapaginaneaumentalavisibilità
  43. 43. A/B testing Questo è il metodo principale che permette di ottimizzare una landing page, confrontando le diverse variazioni possibili. Internet Days 3 ottobre 2013 *Marketing Sherpa, 2012 +5%conversioni
  44. 44. Internet Days 3 ottobre 2013 Case study
  45. 45. Internet Days 3 ottobre 2013 MARCHIO IN EVIDENZA BANNER CHE CATTURA L’ATTENZIONE GIUSTA QUANTITÁ DI INFORMAZIONI CALL TO ACTION EVIDENZIATA
  46. 46. Internet Days 3 ottobre 2013 ULTERIORI INFORMAZIONI TRY BEFORE YOU BUY TESTIMONIALS SPECIFICAZIONE DEI VANTAGGI RIPETIZIONE DELLA CALL TO ACTION INDICAZIONE PER FACILITARE LA SCELTA
  47. 47. Internet Days 3 ottobre 2013 MARCHIO BEN VISIBILE CALL TO ACTION IN EVIDENZA IMMAGINI EMOZIONALI
  48. 48. Internet Days 3 ottobre 2013 CALL TO ACTION GIUSTA QUANTITÁ DI INFORMAZIONI IMMAGINI EMOZIONALI CALL TO ACTION
  49. 49. Internet Days 3 ottobre 2013 BRAND BEN VISIBILE PIÙ IMMAGINI INVECE DI UNA UNICA MAGGIORE QUANTITÀ DI INFORMAZIONI
  50. 50. Internet Days 3 ottobre 2013 Per concludere
  51. 51. Uncattivodesigncausaladiminuzionedellevendite IlCODmassimizzailnumerodiconversioni Lelandingpagessonounostrumentoancorapocoutilizzato Lelandingpagesoffronounnettovantaggiocompetitivo Laperformancedeltuobusinesspuòesseremigliorata attraversometodologieestrumentispecifici. Internet Days 3 ottobre 2013 Cosa portare a casa?
  52. 52. InternetDays2ottobre2013 Ditecilavostra
  53. 53. InternetDays2ottobre2013 Grazie!
  54. 54. InternetDays2ottobre2013 www.digitalnatives.it

×