Your SlideShare is downloading. ×
Conversion Oriented Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Conversion Oriented Design

454
views

Published on

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

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


0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
454
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. InternetDays3ottobre2013 Conversion Oriented Design: da visitatori a clienti soddisfatti Antonio Bonanno - Cristina Viganò Milano, 3 ottobre 2013
  • 2. Internet Days 3 ottobre 2013 Chisiamo Antonio Bonanno Managing Partner @antoniobonanno Cristina Viganò UX Researcher @crvigano
  • 3. InternetDays2ottobre2013 BUSINESS SVILUPPO UX DESIGN
  • 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. Internet Days 3 ottobre 2013 Conversation #DesignToConvert #InternetDays
  • 6. Internet Days 3 ottobre 2013 Why Conversion Oriented Design?
  • 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. Internet Days 3 ottobre 2013 COSA SERVE? Conoscenzadeiprincipi Esperienza Competenzanell’usodimetodi estrumenti
  • 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. Internet Days 3 ottobre 2013 Persuasive Technology
  • 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. Internet Days 3 ottobre 2013 RIDUZIONE Semplificareleazioni: “buywithoneclick” Lessismore:menopossibilità disceltarendeiprocessidecisionali piùsemplici
  • 13. Internet Days 3 ottobre 2013 Unbounce, 2013 +78%conversioni
  • 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. Internet Days 3 ottobre 2013 User Centered Design
  • 16. Internet Days 3 ottobre 2013 Definizione di UCD Usercentereddesignèilprocesso diprogettazionecheponealcentro diognipassoibisogni,idesideri eilimitidell’utente. UCDpermettelamassimizzazione dellauserexperience.
  • 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. 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. 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. 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. 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. 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. Internet Days 3 ottobre 2013 VISUAL DESIGN • Look & Feel • Colori • Tipografia • Icone
  • 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. Internet Days 3 ottobre 2013 Conversion Oriented Design
  • 26. Internet Days 3 ottobre 2013 E-COMMERCE LANDING PAGES COD - Cosa comprende?
  • 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. 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. 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. Internet Days 3 ottobre 2013 Come progettare una landing page?
  • 31. Internet Days 3 ottobre 2013 DESIGN Beauty:unalandingpagedeve avereunottimolookandfeel,dotato diunforteimpattoemotivo.
  • 32. Internet Days 3 ottobre 2013 DESIGN Beauty Encapsulation:creareunacornice intornoallaCTAevitachelosguardo delvisitatoresiadistrattodaaltri elementi
  • 33. Internet Days 3 ottobre 2013 DESIGN Beauty Encapsulation Contrastandcolor:utilizzarecolori contrastantiperlaCTAaiutaadarle maggiorrisaltoeacatturare l’attenzionedell’utente
  • 34. Internet Days 3 ottobre 2013 DESIGN Beauty Encapsulation Contrastandcolor Directionalcues:frecceealtri patternpossonoessereusatiper indirizzarelosguardodell’utente sullaCTA
  • 35. Internet Days 3 ottobre 2013 DESIGN Beauty Encapsulation Contrastandcolor Directionalcues Whitespace:utilizzarespazi bianchiperraggruppare l’informazioneevita l’appesantimentograficodella pagina
  • 36. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità:ilprocesso decisionaleèacceleratodalla percezionediaverepocotempo
  • 37. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy:poterprovareil prodottoprimadicomprarlo aumentalafiduciadell’utenteela probabilitàdiconversione
  • 38. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy Socialproof:lacredibilitàdel prodottoèaumentatadalparere positivodialtriutenti
  • 39. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy Socialproof Quantitàdiinformazione:l’utente habisognodiinformazioneper scegliere,matroppotestopuò essereoverwhelming
  • 40. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy Socialproof Quantitàdiinformazione Testimonials:oltrechedalsocial proof,lacredibilitàèaumentatadalla garanziachealtreaziende importantinelsettorefaccianouso delprdotto
  • 41. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy Socialproof Quantitàdiinformazione Testimonials Form:lasemplicitàdella compilazionedelformè fondamentalepernonfrenarela conversionedell’utente
  • 42. Internet Days 3 ottobre 2013 PSICOLOGIA Urgenzaescarsità Trybeforeyoubuy Socialproof Quantitàdiinformazione Testimonials Form Sharing:incentivarelacondivisione dellapaginaneaumentalavisibilità
  • 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. Internet Days 3 ottobre 2013 Case study
  • 45. Internet Days 3 ottobre 2013 MARCHIO IN EVIDENZA BANNER CHE CATTURA L’ATTENZIONE GIUSTA QUANTITÁ DI INFORMAZIONI CALL TO ACTION EVIDENZIATA
  • 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. Internet Days 3 ottobre 2013 MARCHIO BEN VISIBILE CALL TO ACTION IN EVIDENZA IMMAGINI EMOZIONALI
  • 48. Internet Days 3 ottobre 2013 CALL TO ACTION GIUSTA QUANTITÁ DI INFORMAZIONI IMMAGINI EMOZIONALI CALL TO ACTION
  • 49. Internet Days 3 ottobre 2013 BRAND BEN VISIBILE PIÙ IMMAGINI INVECE DI UNA UNICA MAGGIORE QUANTITÀ DI INFORMAZIONI
  • 50. Internet Days 3 ottobre 2013 Per concludere
  • 51. Uncattivodesigncausaladiminuzionedellevendite IlCODmassimizzailnumerodiconversioni Lelandingpagessonounostrumentoancorapocoutilizzato Lelandingpagesoffronounnettovantaggiocompetitivo Laperformancedeltuobusinesspuòesseremigliorata attraversometodologieestrumentispecifici. Internet Days 3 ottobre 2013 Cosa portare a casa?
  • 52. InternetDays2ottobre2013 Ditecilavostra
  • 53. InternetDays2ottobre2013 Grazie!
  • 54. InternetDays2ottobre2013 www.digitalnatives.it

×