Progettazione e design di un sito web

1

1. Modello di scansione a F

Esiste una categoria di utenti che legge (o meglio “scansiona”) le pagine web seguendo un modello che ha la forma della lettera "F".

2

La lettura a F: mappe di calore

3

La lettura a F: rappresentazione grafica

4

Modello a F applicato alle pagine web

Sulla base di questa rappresentazione, possiamo costruire una pagina web, inserendo i principali contenuti in modo da rispettare il modello di lettura ad "F".

5

Modello a F sulla pagina web

6

2. Modello di Gutenberg

7

Diagramma di Gutenberg

❏ Si inizia a leggere in alto a sinistra (“zona ottica primaria”);

❏ Poi ci si sposta orizzontalmente verso destra ("forte area cieca”);

❏ Subito dopo, si ritorna a sinistra, muovendosi rapidamente verso il basso (“Debole Area Cieca”);

❏ Infine, si prosegue orizzontalmente verso destra (“Zona terminale”).

8

Il diagramma può essere traslato su un layout effettivo

9

10

Cosa é una Conversione?❏ Ci sono determinate azioni che vogliamo che gli utenti

compiano sul nostro sito web: ❏ compiere un acquisto online❏ richiedere informazioni compilando un form❏ iscriversi alla newsletters❏ vedere una pagina predefinita❏ scaricare un file

❏ Questi eventi sono chiamati “conversioni”, in quanto il la visita dell’utente si è convertita in un risultato.

11

Cosa è una Landing Page?

❏ E' una pagina strategica a cui inviare il traffico con l'obiettivo di ottenere una conversione.

❏ La Landing Page è in sostanza una pagina ottimizzata per far compiere un'azione specifica al visitatore.

12

Cosa è una Landing Page?

13

Struttura di una buona Landing Page

❏ Titolo persuasivo (headline)

❏ Immagine coerente ed efficace

❏ Benefici

❏ Testimonials

❏ Call To Action (Above the fold!)

❏ Poche distrazioni (link esterni)

14

15

L'importanza del Design

❏ L'aspetto estetico di una Landing Page è un fattore determinante per le conversioni.

❏ Quasi il 50% degli utenti valuta la credibilità di un sito web basandosi sull'aspetto estetico.

16

Logo

❏ E' il primo passo attraverso il quale noi ci presentiamo

❏ Attraverso il logo diamo la nostra identità

❏ Un logo efficace comunica identità, credibilità e sicurezza

17

Logo amatoriale

18

Logo professionale

❏ Realizzare un Logo semplice e che comunica

❏ Scegliere un buon font

❏ Affiancarlo a una immagine

19

Tagline

❏ La breve riga di testo che accompagna i loghi

❏ Importante perchè permette di capire a colpo d'occhio quale è il core-business dell'azienda

20

La posizione del logo

❏ La posizione più efficace in cui inserire il logo è l'angolo in alto a sinistra.

❏ Rappresenta il punto in cui gli utenti iniziano a guardare una pagina.

❏ E' ormai anche uno standard: tutti i siti posizionano il logo in questa posizione.

21

Posizione standard

22

Un headline efficace

❏ E' uno dei primi elementi che un utente legge sulla pagina.

❏ Che cosa mi offre questa pagina?

❏ L'headline rappresenta la prima occasione per catturare l'attenzione dell'utente.

23

L'headline deve distinguersi

Si deve distinguere nettamente dal resto del testo

❏ Come lo facciamo?

❏ DIMENSIONE

❏ POSIZIONE

❏ STILE GRAFICO

24

Dimensione: deve essere GRANDE!

25

Caratteristiche headline

❏ Deve essere ben evidente

❏ Deve distinguersi dal corpo del testo

❏ Deve essere breve

IMMAGINE dell’above the fold

❏ Ha un obiettivo: deve far capire all’utente che è nel posto giusto.

❏ Deve mostrare l’oggetto dell’offerta possibilmente in uso.

❏ Deve emozionare l’utente trasmettendo il benefit ricevuto.

26

26

27

IMMAGINE dell’above the fold

Se vendo servizi, posso raffigurare il professionista che presterà il servizio:

❏ crea fiducia❏ trasmette autorità

28

28

29

29

30

Contestualizzazione

❏ Vendo una App?

❏ Associamola al dispositivo all'interno del quale viene utilizzata!

31

Prodotto fisico

❏ Immagine scontornata

❏ Sfondo bianco

❏ Esaltiamo il prodotto

(vedi Apple)

32

Effetto fisico del prodotto

❏ Se vendiamo pillole dimagranti, facciamo vedere l'effetto fisico

❏ Presentare una confezione di pillole è poco attraente

33

Effetto psicologico

❏ Una immagine che rappresenta una famiglia sorridente per aver scelto una buona assicurazione per gli infortuni.

34

Immagini che attirino l'attenzione

❏ I volti delle persone attirano l'occhio dell'utente.

❏ Siamo inconsciamente portati a soffermarci su volti e visi umani.

35

Il potere dei volti...

❏ I volti delle persone attirano l'occhio dell'utente.

❏ Siamo inconsciamente portati a soffermarci su volti e visi umani.

36

La direzione dello sguardo

37

Creare Engagement

❏ Fate venir voglia all'utente di comprare un prodotto.

❏ Dobbiamo quasi far toccare con mano il prodotto.

38

E' importante “ambientare” gli scatti di prodotto...

❏ Rappresentare ad esempio il prodotto in uso

❏ Esempio persone che si stanno divertendo mentre utilizzano il prodotto

39

Ambientazione del prodotto

40

Perché è importante usare foto ambientate?

❏ Quando vediamo qualcuno che si diverte... noi ci divertiamo.

❏ Ci immedesimiamo con i sentimenti che la persona prova…

❏ ...e in quel momento desideriamo la stessa cosa.

41

La presenza umana nelle immagini di prodotto (prodotto indossato)...

42

...funziona meglio dell'immagine del prodotto non indossato

43

Perché funziona?

❏ L'utente vive il prodotto più da vicino

❏ Dà un senso di concretezza

❏ In più c'è la componente “umana”

44

Call To Action (CTA)

❏ E' la chiamata all'azione❏ In genere gli utenti sono pigri: scorrono la

pagina, guardano le immagini... poi non sanno cosa fare!

❏ Dobbiamo suggerire in modo chiaro e persuasivo cosa fare sulla pagina.

45

Una Call to Action deve:

❏ Essere DISTINTIVA

❏ Apparire INTUITIVA

❏ Comunicare i BENEFICI

❏ Rispondere ai DUBBI

46

Le call to action più efficaci sono rappresentate dai bottoni

47

Call to action testuali?

❏ I link testuali vengono interpretati come elementi che servono per spostarsi all'interno del sito o per aprire una pagina esterna

❏ Il pulsante viene interpretato invece come un bottone fisico in un muro: lo premo e accade qualcosa... E' legato a qualcosa di più fisico, materiale e attira maggiormente l'attenzione.

48

Call to action con pulsante

49

Call To Action primarie e secondarie

❏ Quando in un sito web abbiamo più call to action, è bene distinguerle enfatizzando la call to action primaria.

❏ Sfruttare colori più caldi per la call to action primaria e colori più freddi per quella secondaria.

❏ In generale utilizzare colori che distinguano le differenti call to action cercando di evidenziare quella più rilevante.

50

Esempio CTA primarie e secondarie

51

Dove posizionare le call to action?

❏ Dipende dalla lunghezza della pagina

❏ Per pagine lunghe, ripeterla più volte

❏ Per pagine brevi è importante che sia posizionata “above the fold” (legge di Gutenberg)

52

Occorre in ogni caso testare...

❏ Dipende dal design

❏ Dipende dal vostro target

❏ Fare split test inserendo la call to action in questa posizione è sicuramente un buon punto di partenza!

53

I testi di una CTA devono essere:❏ Motivanti (non un banale “clicca qui!!)

❏ Prevenire le possibili obiezioni / barriere dell'utente inserendo frasi rassicuranti.

❏ Magari lo abbiamo già detto nel testo... ma lo ribadiamo a livello di bottone!

❏ Esempio:

❏ Pulsante: Vedi Piani e Prezzi

❏ Frase: Hai 30 giorni di prova gratuita

54

CTA motivante

55

Quale è il colore più adatto per una call to action?

❏ E' da testare!

❏ Colore rosso, verde, arancio?

❏ Colore statico?

❏ Colore dinamico?❏ Esperimento su un pulsante rosso che al passaggio del

mouse diventa verde.

❏ Risultato +40% opt in rate

56

Colore ROSSO delle CTA

❏ Colore caldo, che viene notato subito

❏ A livello semantico rappresenta però il colore dello stop, del sangue, del pericolo, dell'errore

❏ TESTARE...!

57

Colore Verde nelle CTA

● Il colore verde con il senso di gratuità è molto efficace!

● Il verde è il colore dei soldi, della fortuna e si lega bene con questa tonalità a livello di mondo occidentale.

58

Esempio colore verde nella CTA

59

FEEDBACK e TESTIMONIANZE

❏ Cosa dicono di voi?

❏ Feedback e testimonianze sono efficaci perché utilizzano la “Riprova Sociale” come leva persuasiva:

Se questo prodotto / servizio è piaciuto a tante persone, probabilmente piacerà anche a me!

60

Altri elementi che sfruttano la “riprova sociale”

❏ Elenco di aziende per cui avete lavorato

❏ I loghi di un network di collaboratori (i vostri partners)

❏ Apprezzamenti Social: 2500 “Mi Piace”

61

ELENCHI Puntati

❏ Efficaci per dare risalto, ad esempio, alle caratteristiche dell'offerta o ai benefici.

❏ Meglio se accompagnate da icone chiare e intuitive.

62

Altri elementi grafici❏ Frecce, icone e box colorati

❏ Sono elementi che attirano e guidano l'occhio dell'utente lungo la Landing Page

❏ Creano uno schema visivo delle informazioni

Ricordiamo che l'occhio dell'utente è pigro e quindi dobbiamo aiutarlo a trovare le informazioni più importanti...

e subito!

Il Design delle Landing Page | Web2lab 63

FRECCE

64

RIPETIZIONI

La ripetizione di un colore all'interno di una pagina, crea una schema visivo e indirizza l'occhio in una direzione, magari verso una call to action dello stesso colore.

65

Elementi grafici circolari

❏ L'occhio umano è attratto molto dai cerchi

❏ Il cerchio rappresenta un punto focale

❏ E’ come una macchia su un muro bianco: guardiamo la macchia... ma non il muro!

66

Le Form❏ Rappresentano un

momento delicato per l'utente in quanto gli chiediamo qualcosa...

❏ Le form devono essere semplici, chiare ed intuitive... ma soprattutto impaginate nel punto più efficace.

67

I COLORI

nel design di un sito web

68

ARANCIONE

❏ Colore che comunica economicità

❏ Lo notiamo spesso nei supermercati: confezione pasta economica colore arancione.

❏ Utilizzato da siti di banche online come:❏ Iwbank

❏ Ing Direct Conto Arancio

69

Esempio LP con prevalenza colore arancione

70

BLU

● Colore utilizzato per trasmettere professionalità

● Utilizzato in siti che offrono prodotti o servizi di alta qualità

71

Esempio LP con prevalenza colore BLU

72

VIOLA

❏ Colora che porta ad immaginare molto alla cura di se stessi

❏ Colore molto femminile

❏ Colore che caratterizza spesso la chirurgia estetica

73

Esempio LP con prevalenza colore Viola

74

NERO

❏ Il nero è un colore di carattere, forte e raffinato allo stesso tempo.

❏ E’ adeguato nei casi in cui il sito o la landing page tratta di articoli di lusso o servizi molto sofisticati.

75

Esempio LP con prevalenza colore Nero