Conversion Oriented Design
-
Upload
digital-natives -
Category
Documents
-
view
913 -
download
0
Transcript of Conversion Oriented Design
![Page 1: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/1.jpg)
Internet Days 3 ottobre 2013
Conversion Oriented Design: da visitatori a clienti soddisfatti
Antonio Bonanno - Cristina ViganòMilano, 3 ottobre 2013
![Page 2: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/2.jpg)
Internet Days 3 ottobre 2013
Chi siamo
Antonio BonannoManaging Partner
@antoniobonanno
Cristina ViganòUX Researcher
@crvigano
![Page 3: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/3.jpg)
Internet Days 2 ottobre 2013
BUSINESS SVILUPPO
UX DESIGN
![Page 4: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/4.jpg)
Internet Days 3 ottobre 2013
Agenda – Di cosa parleremo oggi?
Persuasive Technology
2
Come Creare unaLanding Page
5
Why Conversion Oriented Design?
1
User CenteredDesign
3
Conversion OrientedDesign
4
Case study
6
![Page 5: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/5.jpg)
Internet Days 3 ottobre 2013
Conversation#DesignToConvert
#InternetDays
![Page 6: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/6.jpg)
Internet Days 3 ottobre 2013
Why Conversion Oriented Design?
![Page 7: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/7.jpg)
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
CATTIVODESIGN
UTENTEPOCO
SODDISFATTO
RIDUZIONEVENDITE
• riduzione dei click• perdita di fiducia nel brand
COD – Perché serve?
![Page 8: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/8.jpg)
Internet Days 3 ottobre 2013
COSA SERVE?
Conoscenza dei principi
Esperienza
Competenza nell’uso di metodi e strumenti
![Page 9: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/9.jpg)
Internet Days 3 ottobre 2013
Conversion Oriented Design
Insieme di processi e strumenti improntato al raggiungimento di uno
specifico obiettivo di business.
User CenteredDesign
PersuasiveTechnology
COD – Cos’è?
![Page 10: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/10.jpg)
Internet Days 3 ottobre 2013
Persuasive Technology
![Page 11: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/11.jpg)
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
![Page 12: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/12.jpg)
Internet Days 3 ottobre 2013
RIDUZIONE
Semplificare le azioni : “buy with one click”
Less is more: meno possibilità di scelta rende i processi decisionali più semplici
![Page 13: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/13.jpg)
Internet Days 3 ottobre 2013
Unbounce, 2013
+78%conversioni
![Page 14: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/14.jpg)
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À
![Page 15: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/15.jpg)
Internet Days 3 ottobre 2013
User Centered Design
![Page 16: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/16.jpg)
Internet Days 3 ottobre 2013
Definizione di UCD
User centered design è il processo di progettazione che pone al centro di ogni passo i bisogni, i desideri
e i limiti dell’utente.
UCD permette la massimizzazione della user experience.
![Page 17: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/17.jpg)
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
![Page 18: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/18.jpg)
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
![Page 19: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/19.jpg)
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.
![Page 20: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/20.jpg)
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.
![Page 21: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/21.jpg)
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
![Page 22: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/22.jpg)
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
![Page 23: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/23.jpg)
Internet Days 3 ottobre 2013
VISUAL DESIGN
• Look & Feel
• Colori
• Tipografia
• Icone
![Page 24: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/24.jpg)
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
![Page 25: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/25.jpg)
Internet Days 3 ottobre 2013
Conversion Oriented Design
![Page 26: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/26.jpg)
Internet Days 3 ottobre 2013
E-COMMERCE LANDING PAGES
COD - Cosa comprende?
![Page 27: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/27.jpg)
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".
![Page 28: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/28.jpg)
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
![Page 29: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/29.jpg)
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
![Page 30: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/30.jpg)
Internet Days 3 ottobre 2013
Come progettare una landing page?
![Page 31: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/31.jpg)
Internet Days 3 ottobre 2013
DESIGN
Beauty: una landing page deve avere un ottimo look and feel, dotato di un forte impatto emotivo.
![Page 32: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/32.jpg)
Internet Days 3 ottobre 2013
DESIGN
Beauty
Encapsulation: creare una cornice intorno alla CTA evita che lo sguardo del visitatore sia distratto da altri elementi
![Page 33: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/33.jpg)
Internet Days 3 ottobre 2013
DESIGN
Beauty
Encapsulation
Contrast and color: utilizzare colori contrastanti per la CTA aiuta a darle maggior risalto e a catturare l’attenzione dell’utente
![Page 34: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/34.jpg)
Internet Days 3 ottobre 2013
DESIGN
Beauty
Encapsulation
Contrast and color
Directional cues: frecce e altri pattern possono essere usati per indirizzare lo sguardo dell’utente sulla CTA
![Page 35: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/35.jpg)
Internet Days 3 ottobre 2013
DESIGN
Beauty
Encapsulation
Contrast and color
Directional cues
White space: utilizzare spazi bianchi per raggruppare l’informazione evita l’appesantimento grafico della pagina
![Page 36: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/36.jpg)
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenza e scarsità: il processo decisionale è accelerato dalla percezione di avere poco tempo
![Page 37: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/37.jpg)
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenza e scarsità
Try before you buy: poter provare il prodotto prima di comprarlo aumenta la fiducia dell’utente e la probabilità di conversione
![Page 38: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/38.jpg)
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenza e scarsità
Try before you buy
Social proof: la credibilità del prodotto è aumentata dal parere positivo di altri utenti
![Page 39: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/39.jpg)
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenza e scarsità
Try before you buy
Social proof
Quantità di informazione: l’utente ha bisogno di informazione per scegliere, ma troppo testo può essere overwhelming
![Page 40: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/40.jpg)
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenza e scarsità
Try before you buy
Social proof
Quantità di informazione
Testimonials: oltre che dal social proof, la credibilità è aumentata dalla garanzia che altre aziende importanti nel settore facciano uso del prdotto
![Page 41: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/41.jpg)
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenza e scarsità
Try before you buy
Social proof
Quantità di informazione
Testimonials
Form: la semplicità della compilazione del form è fondamentale per non frenare la conversione dell’utente
![Page 42: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/42.jpg)
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenza e scarsità
Try before you buy
Social proof
Quantità di informazione
Testimonials
Form
Sharing: incentivare la condivisione della pagina ne aumenta la visibilità
![Page 43: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/43.jpg)
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
![Page 45: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/45.jpg)
Internet Days 3 ottobre 2013
MARCHIO IN EVIDENZA
BANNER CHE CATTURA
L’ATTENZIONE
GIUSTA QUANTITÁ DI
INFORMAZIONI
CALL TO ACTION EVIDENZIATA
![Page 46: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/46.jpg)
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
![Page 47: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/47.jpg)
Internet Days 3 ottobre 2013
MARCHIO BEN VISIBILE
CALL TO ACTION IN EVIDENZA IMMAGINI
EMOZIONALI
![Page 48: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/48.jpg)
Internet Days 3 ottobre 2013
CALL TOACTION
GIUSTA QUANTITÁ DI
INFORMAZIONI
IMMAGINI EMOZIONALI
CALL TO ACTION
![Page 49: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/49.jpg)
Internet Days 3 ottobre 2013
BRAND BEN VISIBILE
PIÙ IMMAGINI INVECE DI UNA UNICA MAGGIORE QUANTITÀ
DI INFORMAZIONI
![Page 51: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/51.jpg)
Un cattivo design causa la diminuzione delle vendite
Il COD massimizza il numero di conversioni
Le landing pages sono uno strumento ancora poco utilizzato
Le landing pages offrono un netto vantaggio competitivo
La performance del tuo business può essere migliorata attraverso metodologie e strumenti specifici.
Internet Days 3 ottobre 2013
Cosa portare a casa?
![Page 54: Conversion Oriented Design](https://reader031.fdocuments.net/reader031/viewer/2022022415/543c54ad8d7f7264488b8d6f/html5/thumbnails/54.jpg)
Internet Days 2 ottobre 2013
www.digitalnatives.it