Cultor College

L'Autore

Oli Gardner, attualmente è il direttore di Inbound-Marketing alla Unbounce, che opera nel campo dei siti web a Vancouver in Canada. Oli ha operato internazionalmente da Londra a Vancouver e, più recentemente in Costa Rica, avendo il privilegio di lavorare con le migliori menti del settore, su alcuni dei progetti più creativi e stimolanti.
Ha conseguito varie specializzazioni: direzione creativa, interaction design, experience design, architettura dell'informazione, facilitazione, definizione del processo, storytelling e fotografia.

In quest'articolo ho intenzione di adottare un approccio diverso, utilizzando la fotografia per illustrare alcuni principi del design.

La comprensione di questi concetti fondamentali vi aiuterà ad attirare l'attenzione dei visitatori, dirigendola verso gli obiettivi del vostro lavoro.

L'elemento più importante di qualsiasi pagina è la realizzazione del suo obiettivo. Allo stesso modo, l'aspetto più importante del disegno della pagina è quello di concentrare l'attenzione del visitatore su quella zona della pagina dove si concretizza l'obiettivo iniziale.

Usare la fotografia per illustrare le tecniche Visuali

Ci sono diversi modi per controllare l'attenzione dei visitatori, si può usare un design audace, accattivante, divertente o controverso, usare un bel carattere tipografico, si può inserire un video per permettere un'esperienza multimediale, ed è possibile utilizzare alcuni principi fondamentali del design per guidare gli occhi dei clienti con spunti direzionali.

Qui dividiamo questi spunti in 2 categorie principali:

1. Spunti direzionali suggestivi: tecniche astratte che guidano l'attenzione in un modo più sottile.

2. Espliciti spunti direzionali: L'uso di frecce e indicatori reali, familiari al nostro comportamento appreso.

Alcuni di questi principi possono essere utilizzati direttamente attraverso la fotografia, infatti il potere illustrativo di una fotografia dovrebbe avere tutto il necessario per far capire il concetto.

Suggerimento: Cliccate sulle foto per vederle ingrandite.

Spunti direzionali suggestivi

1. SPAZIO BIANCO


Gli spazi bianchi (o più correttamente "spazi vuoti") sono aree che non contengono nulla, o quasi, intorno a una zona importante. Il motivo per cui diciamo spazio vuoto è perchè il colore di questo spazio non è importante.

Lo scopo è quello di utilizzare il semplice posizionamento spaziale per permettere al vostro Call To Action (CTA - l'elemento chiave della vostra pagina) di emergere dal suo contesto e proporre all'occhio solo una cosa su cui concentrarsi.

Suggerimento per la pagina di destinazione: Lasciate al vostro CTA un po' di respiro, consentendogli di risaltare dal resto del vostro disegno.

In questo esempio, il tono tranquillo del prato guida l'occhio all'antilope posizionata in un lato.

Un'altra considerazione importante è l'effetto di contrasto del colore.

Questa idea prende in prestito dalle tecniche degli spazi vuoti e di contrasto trattate nei punti #1 e #3, in quanto è un metodo di "isolamento tramite differenza".

In questo primo esempio, è utilizzato un approccio molto impattante: il colore è così travolgente che non si può fare a meno di guardarlo. In questo caso, quasi increduli, anche se è un notevole esempio offerto dalla natura.

Suggerimento: lasciate che il vostro obiettivo primario domini la pagina.

Posizione e contrasto dei colori sono usati qui per spostare l'occhio verso la cavalletta.

La ragione è che l'intera inquadratura ha un colore unico, tranne per il soggetto che interessa.

Suggerimento: utilizzare un unico colore (con una varietà di toni) per tutta la pagina tranne il CTA.

Fate sì che risalti fuori dalla pagina.

3. CONTRASTO


Questo è un concetto piuttosto semplice che si applica su tutto lo spettro colore, ma è più facilmente visualizzato in bianco e nero.

Suggerimento: quanto più si può far sì che il CTA si distingua da ciò che lo circonda, tanto più facile sarà da vedere. Se hai del testo nero / grigio su uno sfondo bianco, allora un CTA nero o bianco non fornirà il contrasto desiderato; sarebbe quindi meglio utilizzare un elemento colorato. Ma se si ha un design molto pulito, senza molti dettagli, un grande pulsante nero o bianco può fornire un effetto drammatico.






Questo a fianco è un esempio più sottile che mostra come il contrasto possa essere utilizzato per evidenziare uno o due elementi chiave di un disegno.

L'occhio è rivolto alla formazione di travertino, che si erge dal lago, e poi rimbalza verso il cespuglio.

4. IL POTERE EVOCATIVO DELL'OCCHIO

Come esseri umani siamo tutti programmati per capire lo scopo e l'uso degli occhi e il significato che viene fornito con uno sguardo, un'occhiata di una persona o di un animale.

Immaginate di camminare lungo una strada della città. C'è una persona, sola, in piedi che guarda direttamente in aria. La nostra innata curiosità ci chiede di seguire il suo sguardo per vedere cosa sta succedendo.
Trasformate questo in una folla di gente che guarda in una certa direzione e ci comporteremo come pecore o pecoroni, seguendo ciecamente l'importanza implicita o percepita delle azioni degli altri.

Nel primo esempio, la scimmia sta guardando la banana come se fosse una mano in un gioco di carte. La curiosità è la motivazione che ti obbliga a seguire il suo sguardo.


Nel secondo scatto, non siete solo curiosi di sapere cosa potrebbe esserci nell'erba, ma si è costretti a guardare verso il basso come fa il coyote.

Dovremmo quindi piazzare la parte più importante della nostra pagina là dove il coyote (e chiunque altro) sta guardando.


Nel terzo esempio, lo spunto direzionale è molto più sottile, ma comunque molto chiaro. La vostra attenzione in primo luogo è attirata dall'alce nell'angolo in basso a destra (questo sarebbe il vostro titolo principale o Unique Selling Proposition).

Quindi spostermo lo sguardo a sinistra per vedere cosa sta guardando, arriveremo così allo stormo di uccelli che volano sopra il fiume, che sarebbe il posto ideale per il nostro CTA.

Suggerimento: usate fotografie di persone o animali nella pagina facendoli guardare direttamente al vostro CTA sia con l'angolazione della testa che direttamente con gli occhi (in un primo piano).

5. INTERRUZIONE (Sorpresa)

C'è un motivo per cui la "cecità" ai banners, negli ultimi anni li ha resi molto meno produttivi per la pubblicità.



La gente si è abituata a sapere dove è posizionata la pubblicità sui siti web, in maniera tale da non guardarla più (mettendo i paraocchi, come un cavallo da corsa) per concentrarsi invece sul resto della pagina.
Per evitarlo è necessario sorprendere le persone.



Nella foto a fianco, la persona (io) è così fuori luogo nella foto di un canyon del deserto da domandarsi il suo scopo o se è reale.



Suggerimento: Vai un po' fuori dagli schemi, prova qualcosa di radicale nelle tue "landing pages".



Sebbene non sia necessario avere un uomo nudo che attraversi la pagina, si potrebbe provare qualcosa di semplice come prendere il pulsante di invito all'azione, ruotandolo di 30-45 gradi per creare una forma inaspettata di design.



Ecco qui a fianco un pulsante che devo utilizzare sul sito Unbounce il mese prossimo. Ho voluto dargli un tocco che renda chiaro il messaggio, richiamando l'attenzione su di esso.

6. INCAPSULAMENTO


Questa è una tecnica classica usata per dirottare gli occhi dei visitatori e creare un effetto di visione a tunnel.
Si può pensare ad esso come la creazione di una finestra nella pagina dove piazzare il CTA bene in vista.

Nel primo esempio, una forte linea scura creata dal fiume aiuta a mantenere l'attenzione sul centro dell'immagine.





Nel secondo esempio, un arco circolare crea una cornice per le rocce, in lontananza, impedendo all'occhio di vagare altrove nella foto.

Suggerimento: usa forti forme dinamiche per vincolare i tuoi punti di interesse.

Pensate alla classica sequenza introduttiva dei film di James Bond, inserita all'interno di un disegno circolare. (Vedi gli esempi).

Espliciti spunti direzionali

Gli esempi precedenti sono stati tutti molto suggestivi, implicando un'interazione con i visitatori del vostro sito. Se si vuole ottenere qualcosa di più diretto e tradizionale, si può provare ad utilizzare segnali direzionali più espliciti per guidare il percorso visivo.

7. FRECCE


Come segnali direzionali, le frecce sono discrete come un pugno in faccia e questo è il motivo per cui funzionano così bene.

Con così poco tempo sulla tua pagina, guidare l'utente alla "cassa" è una mossa intelligente.

Le frecce ci dicono: "ignorate tutto il resto e prestate attenzione solo a questo".

Photo credit Missy Shana - MissyShana.com

L'esempio qui sopra è impressionante, mostra 3 tipi di spunti direzionali tutti in una volta.
La freccia è un puntatore direzionale, l'uomo sulla destra vi indirizza con la direzione del suo sguardo e, infine, il testo capovolto agisce come un'interruzione che ti induce a fermarti a fissarla (e molto probabilmente ruotate la testa per capire quello che dice).

Suggerimento: richiamate l'attenzione sugli elementi più importanti della pagina usando le frecce collocate e angolate strategicamente. Collega insieme una sequenza di frecce per definire un percorso da seguire per il visitatore, per portarlo al vostro CTA.

8. PERCORSI

I percorsi sono rappresentazioni del mondo reale, viali che attivano il nostro cervello a pensare che dobbiamo seguirli.

Questo esempio mostra un lungo rettilineo, che porta l'occhio alla grande formazione rocciosa nella parte superiore della foto.

Le strade sono così fortemente radicate nella nostra psiche come percorso più agevole e naturalmente noi le percepiamo come una guida del nostro percorso.

La strada guida l'occhio direttamente verso le montagne sullo sfondo. Piazzate il vostro CTA qui.

Suggerimento: disegnate linee convergenti per attirare la gente al vostro CTA. I triangoli sono tra le forme più dinamiche e la loro naturale tendenza ad indicare ne fanno uno speciale strumento di progettazione.