Le immagini costituiscono un potente strumento per catturare l’attenzione e comunicare dei messaggi. Non a caso si dice che “un’immagine vale più di tante parole”.

E’ quindi normale che la maggior parte dei siti web visualizzino sempre di più delle grandi immagini in grado di catturare lo sguardo dei visitatori. Spesso, una sola grande immagine non basta: non è raro incontrare siti con una serie di immagini che scorrono. 

In un recente post, Kathryn Whitenton ha illustrato questa tendenza prendendo ad esempio la nuova home page della Southwest Airlines, che visualizza una grande immagine che fa da sfondo all’intera pagina (fig. seguente).

Come potete osservare, la tabella per la prenotazione dei voli – che nella maggior parte dei siti della compagnie aeree occupa la parte superiore della pagina – è relegata al fondo dell’home page. 

In casi come questi, si ritiene che la grande immagine sia il modo migliore per coinvolgere i visitatori. 

Qual è il problema?

Che un sito web non deve solo attirare l’attenzione del visitatore: deve anche, e soprattutto, dare informazioni che rispondano alle richieste del visitatore (che sono il vero motivo per cui è arrivato su questa pagina).   

L’immagine presente sul sito della Southwest Airlines è bella e accattivante ma è anche molto invadente, tanto da mettere in secondo piano altri elementi che hanno obiettivi molto più importanti. E non parlo tanto del menu di navigazione – reso poco visibile dalla mancanza di un backgroud che lo distacchi da quello dell’immagine che, spesso, non è un male; mi riferisco soprattutto alla call to action “Book now” (“Prenota adesso”) che è sicuramente l’obiettivo principale del sito.

Questa call to action, sta al centro della pagina, ma non ha un suo proprio sfondo che la faccia emergere da quello della pagina. Al contrario, è immersa dentro lo sfondo della pagina, con il risultato di essere poco distinguibile. 

Anche la tabella per la ricerca dei voli, posta così in basso, richiede che il visitatore faccia scorrere la pagina verso il basso per arrivare al pulsante di ricerca. Cosa che non tutti faranno. 

Se andiamo a vedere l’home page della Southwest Airlines come era prima del cambiamento, ci troviamo di fronte a una normale pagina di una compagnia aerea: numerose offerte promozionali si contendono lo spazio della pagina insieme ai moduli per la ricerca dei voli e per il controllo della prenotazione, che sono però posti in bella evidenza nella parte superiore dell’home page (fig. seguente). 

Ora, è evidente che la nuova home page, che abbiamo osservato prima, è sicuramente più bella di questa precedente versione. Ma qual è la più efficace? Quale mette meglio in evidenza i veri obiettivi del sito: fare una prenotazione e controllare una prenotazione?

Sembra non esserci alcun dubbio: la vecchia home page era molto più efficace nel far compiere le azioni desiderate ai viaggiatori.

Se ne deve essere resa conto anche la Southwest Airlines, dato che da alcuni giorni l’home page è nuovamente cambiata (fig. seguente).

In questa nuovissima pagina, l’immagine è molto meno invadente, richiama il business della società, e la call to action è messa ben in evidenza dallo sfondo giallo che contrasta con quello grigio dell’immagine.

Questa home page è sicuramente più bella della vecchia home page, ma è anche più funzionale della precedente versione. Possiamo dire che è il giusto mix tra le due precedenti versioni.

Cosa dobbiamo fare

Il problema è allora quello di definire quali sono gli obiettivi della pagina e dare conseguentemente priorità agli elementi che li manifestano.

Per esempio, una grande immagine può andare bene nel caso di Apple, dove si mette in evidenza la caratteristica più importante del nuovo iPhone 6 rispetto al modello precedente: “iPhone 6 – Bigger than bigger” (“Più grande del più grande” (fig. seguente). 

Questo è il messaggio principale che Apple vuole comunicare.

Nella maggior parte dei casi, però, l’immagine ha solamente lo scopo di supportare il brand e di rendere la pagina visivamente più attraente. In queste situazioni, l’immagine non deve oscurare i principali elementi della pagina. Questa condizione è rappresentata molto bene dall’ultima home page di Southwest Airlines.

Un altro bell’esempio – mostrato da Kathryn Whitenton – è fornito dall’home page di State Farm (fig. seguente).

Qui l’immagine – che mostra una macchina con a fianco una guidatrice – risulta coerente con il business dell’azienda e, quindi, supporta il brand (al contrario dell’immagine presente nella penultima home page di SouthWest Airlines, con il verde paesaggio collinare che non ha alcun collegamento con il suo business).

Inoltre, l’immagine non occupa troppo spazio e, di conseguenza, non oscura gli elementi chiave della pagina: ottenere una quotazione, contattare l’azienda, fare un reclamo. 

Conclusioni

Per dare il giusto peso alle immagini e bilanciarle con gli altri elementi della pagina, bisogna seguire questi passaggi:

1. identificare gli obiettivi della pagina e dare loro una priorità; 
2. definire quali elementi della pagina sono collegati a questi obiettivi;
3. attribuire il giusto peso visivo a questi elementi in base all’importanza degli obiettivi, dando più peso agli elementi più importanti; 
4. selezionare le immagini da inserire nella pagina solo dopo che sono stati definiti i loro specifici obiettivi.