Conversion Oriented Design

908 views

Published on

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

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

×