Come Peggy Olson progetterebbe per Interactive

Nell'era di Mad Men i marketer sapevano esattamente come sarebbe stato consumato il loro lavoro. Il pubblico target vedrebbe l'annuncio in TV, lo ascolterebbe alla radio, lo vedrebbe su una rivista o su un cartellone pubblicitario e forse arriverebbe nella cassetta della posta (lumaca). Se hai pianificato un annuncio stampato o un pezzo di posta, sapevi le dimensioni esatte dell'immobile per cui stavi progettando e hai ottimizzato il tuo annuncio per adattarlo a quello spazio. Il consumatore vedrebbe quel contenuto esattamente come lo avevi immaginato quando lo hai progettato.

Se Peggy Olson stesse progettando un annuncio oggi, dovrebbe considerare il contesto di come quell'annuncio verrebbe visualizzato e come il suo pubblico di destinazione interagirebbe con esso. Non ci sarebbe stata alcuna garanzia che il suo lavoro sarebbe stato visualizzato nel modo in cui l'aveva immaginato, quindi avrebbe dovuto ottimizzare il layout e il design in modo che avesse un impatto indipendentemente da come fosse visualizzato. Doveva assicurarsi che l'invito all'azione (CTA) fosse chiaro, conciso e decifrabile, anche su uno schermo da tre pollici.

Progettare pagine web, landing page ed e-mail oggi è molto più complicato di quanto non fosse ai tempi di Mad Men. Oggi hai la dimensione aggiuntiva degli elementi interattivi e non sapere su quale dispositivo verrà visualizzato il contenuto. Un layout che sembra perfetto sullo schermo di un computer a grandezza naturale potrebbe essere un completo disastro se visualizzato su un tablet o uno smartphone. Un CTA poco chiaro o posizionato nel posto sbagliato può uccidere il tuo tasso di coinvolgimento.

Tre best practice chiave per la progettazione interattiva

La maggior parte dei consumatori oggi ha la capacità di attenzione di un moscerino. Hai circa due secondi per agganciarli quando colpiscono il tuo contenuto prima che decidano se fare clic o meno su qualcosa di più interessante. È imperativo comprendere questi tre concetti quando si progetta un'e-mail, una pagina di destinazione o una pagina Web:

1. In che modo il layout influisce sul coinvolgimento: scopri come disporre gli elementi su una pagina per il massimo coinvolgimento
2. In che modo il contenuto influisce sul coinvolgimento: scopri cosa mi costringerà a interagire con i tuoi contenuti
3. Quanto è importante il tempo: hai due secondi per attirare la mia attenzione

Sembra semplice, vero? Se fosse così semplice non lo scriverei! Non posso dirti quanti contenuti mi imbatto quotidianamente che mi frustrano al punto da premere semplicemente il pulsante Indietro. Sto parlando di grandi aziende con tasche profonde, ma senza senso del design.

Quindi entriamo nel pratico. Continua a leggere per alcuni suggerimenti molto semplici che ti aiuteranno a ottimizzare i layout delle tue pagine per il coinvolgimento su qualsiasi piattaforma.

Come l'occhio scansiona una pagina

La prima cosa che devi capire è come l'occhio umano traccia un contenuto. Quando studiavo pubblicità al college ci è stato detto che l'occhio tracciava una pagina a forma di Z maiuscola, iniziando in alto a sinistra. Sono sicuro che questa teoria è stata ideata da uno studio che ha visto un soggetto di prova guardare pezzi di contenuto mentre un ragazzo in camice bianco cercava di disegnare il modello dei movimenti degli occhi su un pezzo di carta. Questo accadeva molto prima della tecnologia delle mappe di calore ora ampiamente disponibile che viene utilizzata per vedere come le persone tracciano le pagine visualizzate online. E, attenzione, le persone scansionano la stampa in modo leggermente diverso rispetto ai contenuti online.

Il consenso in questi giorni è che l'occhio segue uno schema con la F maiuscola durante la visualizzazione di un contenuto online, iniziando ancora in alto a sinistra. Il tuo occhio normalmente segue orizzontalmente prima la barra superiore del FA, poi la seconda barra del FA e infine dall'alto verso il basso lungo il gambo verticale del FA.

Che cosa significa questo? Significa che il tuo CTA deve essere da qualche parte in quel modello F maiuscola, o devi mettere i baffi su un bambino. Prendi una decisione progettuale consapevole per posizionare il tuo invito all'azione principale in un punto in cui attirerà l'attenzione dello spettatore nei primi due secondi.

Veri disastri di design

Quindi diamo un'occhiata a un vero disastro di progettazione che uno dei miei colleghi qui ad Act-On mi ha aiutato a creare. Mi dispiace dire che l'esempio qui sotto è tratto da contenuti reali che ho trovato online. Ho utilizzato un'azienda fittizia chiamata Actomatic per dimostrare gli errori più comuni che le persone commettono e come correggerli.

Esempio 1: non farmi scorrere per vedere la CTA

L'opportunità persa più comune che vedo è un contenuto senza alcun modo per condividere o condividere pulsanti che sono sepolti nella parte inferiore della pagina sotto la piega. La piega è quella linea immaginaria nella parte inferiore dello schermo. (Il termine deriva dai giorni in cui i giornali erano piegati a metà; "above the fold" era un posizionamento migliore, con un numero di lettori migliore.) Sullo schermo di un laptop di dimensioni medie la piega può essere a 480 pixel dalla parte superiore dello schermo, ma su un iPhone potrebbe trovarsi a 100 pixel dall'alto. Siate consapevoli di questo quando impaginate il contenuto della vostra pagina.

Se stiamo parlando di un blog o di un articolo di più pagine, mi azzarderei a indovinare che la maggior parte delle persone è pronta a condividere dopo aver letto il titolo (se va bene) e le prime due frasi di un contenuto, perché vogliono essere il primo a uscire dal cancello. Alle persone piace condividere nuovi contenuti, non contenuti che hanno già visto condivisi dai loro coetanei cinque volte.

Suggerisco di avere pulsanti di condivisione nella parte superiore e inferiore del contenuto o pulsanti di condivisione che fluttuano accanto al contenuto quando scorri.

Ho lavorato con un'azienda molto nota che ha scoperto che, quando hanno aggiunto pulsanti di condivisione all'inizio e alla fine di un articolo, il tasso di condivisione è salito di oltre il 400%.

Esempio 2: Oh, i miei occhi!

Sei mai atterrato su un contenuto così occupato che non sapevi dove cercare? Forse aveva un video da condividere, un modulo da compilare, qualche copia, qualche link qua e là. Se arrivassi alla pagina qui sotto non saprei da dove cominciare, quindi probabilmente non mi impegnerei affatto. Questo esempio non mi dà alcuna indicazione di ciò che è più importante in questa pagina. Hai due secondi o meno per attirare la mia attenzione e coinvolgermi, e mi hai appena perso.

Se hai più inviti all'azione, chiarisci bene qual è l'ordine logico di questi elementi. Scrivilo con didascalie numerate, se necessario. Se arrivassi su questa pagina mi farei queste domande:

Il layout sembra non pianificato e sciatto con spazi bianchi casuali e caratteri strani. I CTA sono decisamente below the fold.

Se dovessi dare un consiglio ad Actomatic, inizierei chiedendo loro cosa sperano di ottenere con questa pagina. Qual è l'obiettivo qui? Presumo che gli obiettivi principali qui siano convincere le persone a iscriversi al blog e guardare e condividere un breve video. Se è così, allora dobbiamo apportare alcune modifiche.

1. Assicurati che l'invito all'azione principale sia above the fold. Sia i pulsanti di condivisione che il pulsante Iscriviti sono below the fold.
2. Metti in chiaro che desideri che i visitatori si iscrivano al blog E condividano il video
3. Aggiungi alcune informazioni sull'azienda

OK, diamo un'occhiata ora:

La versione nuova e migliorata ha un layout leggermente diverso, meno caratteri, una breve descrizione dell'azienda e del video e una barriera inferiore per l'iscrizione al blog. Ho anche aggiunto collegamenti in basso e un pulsante di contatto. Nota come ho ottimizzato il layout per massimizzare la quantità di informazioni che un lettore vedrebbe nei primi due secondi seguendo il modo in cui l'occhio scansiona naturalmente la pagina. La teoria del modello F dice che questo è l'ordine in cui lo spettatore prenderà gli elementi sulla pagina:

1. Il logo aziendale
2. I titoli
3. I pulsanti condividi e iscriviti
4. La sezione Esplora in basso

Dammi un motivo per interagire

Ora che hai sistemato tutto il layout, devi darmi un motivo per interagire con i tuoi contenuti. Se vuoi che compili un modulo o condivida i tuoi contenuti, deve esserci un motivo convincente per farlo. Quindi lascia che ti chieda, cosa c'è dentro per me?

Se non conosci la risposta a questa domanda, non hai fatto i compiti.

Il motivo principale per cui le persone interagiscono con i contenuti è perché ne traggono una sorta di soddisfazione emotiva o materiale. Se il tuo contenuto è buono lo condividerò perché mi fa sembrare ben informato di fronte ai miei coetanei. Ricevo una spinta all'ego se sono il primo a scoprire un nuovo widget che hai appena rilasciato, quindi ovviamente condividerò il fatto che l'ho visto per primo.

Forse sei un'organizzazione senza scopo di lucro e il tuo contenuto è una bella storia su qualcuno che ha fatto qualcosa di straordinario, condividerò quel contenuto perché mi fa sentire bene e caritatevole. Offrimi la possibilità di vincere un iPad se compilo un modulo e molto più probabilmente ti darò le mie informazioni personali.

Il trucco è sapere cosa spinge il tuo pubblico a impegnarsi. È una ricompensa emotiva, una ricompensa materiale o entrambe? Mettiti nei loro panni e crea una strategia di coinvolgimento orientata al tuo pubblico.

Mantienilo semplice

Di recente ho parlato a una conferenza in cui ho presentato un caso di studio di una campagna di social marketing di successo. Ho indossato una maglietta con questo stampato sul davanti: #KeepItSimple. Cerco di mettere in pratica ciò che predico.

Ho lavorato con clienti che hanno creato contenuti interattivi estremamente complicati e altri che li hanno mantenuti incredibilmente semplici, e il semplice vince quasi ogni volta. Ecco come mantenerlo semplice:

• Scegli tipi di caratteri come Trebuchet facili da leggere online.
• Non mescolare troppi caratteri e dimensioni su una pagina. Una dimensione per le intestazioni, una dimensione per il corpo del testo.
• Mantienilo su un CTA chiaro, se possibile.
• Mantieni le cose importanti above the fold.
• Rendi la barriera all'ingresso il più bassa possibile (non chiedere il primogenito di qualcuno se tutto ciò di cui hai veramente bisogno è il suo indirizzo email)

Il tuo compito a casa

Aspetta un attimo, non hai mai detto che ci sarebbero stati i compiti alla fine di questo articolo! Se ti avessi detto che ci sarebbero stati i compiti, avresti letto fino a qui? Uh Huh. Vorrei che tu dessi un'occhiata a una delle tue landing page con occhio critico e ti chiedessi se c'è margine di miglioramento.

• Visualizza una delle tue pagine di destinazione su un laptop e su un dispositivo mobile. Devi scorrere per arrivare alla CTA? Viene visualizzato bene su un dispositivo mobile?
• Chiedi a un amico che non sa nulla della tua azienda di visualizzare una delle tue pagine di destinazione e chiedi loro di fornire un feedback sincero mentre la stanno visualizzando. Chiedi loro di dirti cosa notano per primi, cosa fa la tua azienda e qual è l'invito all'azione principale sulla pagina.
• Controlla se tutti gli elementi importanti sono all'interno del modello F.
• Testa le tue pagine in quanti più browser possibili su quante più piattaforme possibili. Safari non esegue il rendering di elementi come Chrome. Firefox non esegue il rendering di elementi come Internet Explorer (IE). E diverse versioni di IE possono visualizzare i contenuti in modo completamente diverso.

Non devi avere una laurea in layout e design pubblicitario per farcela. Ma devi essere disposto a guardare i tuoi contenuti attuali con occhio critico.

Ne vale la pena.