conversion oriented design
TRANSCRIPT
Internet Days 3 ottobre 2013
Conversion Oriented Design: da visitatori a clienti soddisfatti
Antonio Bonanno - Cristina ViganòMilano, 3 ottobre 2013
Internet Days 3 ottobre 2013
Chi siamo
Antonio BonannoManaging Partner
@antoniobonanno
Cristina ViganòUX Researcher
@crvigano
Internet Days 2 ottobre 2013
BUSINESS SVILUPPO
UX DESIGN
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
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 page complicata• alto numero di link• navigazione difficoltosa
CATTIVODESIGN
UTENTEPOCO
SODDISFATTO
RIDUZIONEVENDITE
• riduzione dei click• perdita di fiducia nel brand
COD – Perché serve?
Internet Days 3 ottobre 2013
COSA SERVE?
Conoscenza dei principi
Esperienza
Competenza nell’uso di metodi e strumenti
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’è?
Internet Days 3 ottobre 2013
Persuasive Technology
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
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
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 essere persuasivo, un sito deve innanzitutto essere credibile e ispirare fiducia. CREDIBILITÀ
Internet Days 3 ottobre 2013
User Centered Design
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.
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
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
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.
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.
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
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
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 raggiungono determinati obiettivi di utilizzo del sistema.
Consentono di:• identificare criticità e colli di
bottiglia dell'interfaccia
• comprendere meglio aspettative e comportamenti dell’utente
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 arrivino sulla pagina e seguano l'invito a compiere una "azione": l'indice di efficienza viene chiamato "tasso di conversione".
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
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
Internet Days 3 ottobre 2013
Come progettare una landing page?
Internet Days 3 ottobre 2013
DESIGN
Beauty: una landing page deve avere un ottimo look and feel, dotato di un forte impatto emotivo.
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
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
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
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
Internet Days 3 ottobre 2013
PSICOLOGIA
Urgenza e scarsità: il processo decisionale è accelerato dalla percezione di avere poco tempo
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
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
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
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
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
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à
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
Internet Days 3 ottobre 2013
MARCHIO IN EVIDENZA
BANNER CHE CATTURA
L’ATTENZIONE
GIUSTA QUANTITÁ DI
INFORMAZIONI
CALL TO ACTION EVIDENZIATA
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
Internet Days 3 ottobre 2013
MARCHIO BEN VISIBILE
CALL TO ACTION IN EVIDENZA IMMAGINI
EMOZIONALI
Internet Days 3 ottobre 2013
CALL TOACTION
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
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?
Internet Days 2 ottobre 2013
www.digitalnatives.it