Progetta una home page migliore con StoryBrand Framework

Le home page sono come le vetrine dei negozi. Dovrebbero dare al consumatore un'idea di ciò che fa l'azienda, chi gestisce l'attività e almeno un accenno dei prodotti e dei servizi che offre, che si tratti di articoli in vendita, informazioni o intrattenimento.

Proprio come una vetrina, i design della home page possono invogliare le persone a guardare più in profondità, oppure non riescono a catturare l'attenzione di un visitatore (o peggio, allontanarli attivamente). Chiaramente trasmettere una storia del marchio è un metodo che i designer UX possono utilizzare per mantenere le persone sul sito e impegnate abbastanza da esplorare oltre la home page (il framework StoryBrand fornisce una buona tabella di marcia per questo).

Qual è l'obiettivo di una home page?

L'obiettivo di una landing page è convertire i visitatori, mentre l'obiettivo di una home page è coinvolgere i visitatori con il marchio e offrire soluzioni ai loro problemi. Se fatto in modo efficace, un visitatore della home page può trasformarsi in un cliente, potenzialmente un cliente abituale.

Le home page sono migliorate rapidamente negli ultimi decenni grazie all'analisi e ai team di marketing e design che hanno apportato miglioramenti alle prestazioni sulla base di tali dati.

Nel 1993, quando esistevano solo 600 siti Web, l'unico metodo per misurare il traffico di un sito Web era un registro del server che contava il numero di visitatori. Poi sono arrivati ​​i contatori di visite e infine suite di analisi più complete che hanno fornito informazioni su elementi come visitatori unici, visualizzazioni di pagina e frequenze di rimbalzo.

Utilizzando tali dati analitici, i progettisti UX sono in grado di ottimizzare il posizionamento degli inviti all'azione, migliorare la velocità del sito, il test A/B, utilizzare i video per coinvolgere i visitatori, utilizzare immagini di alta qualità per attirare l'attenzione delle persone e includere strumenti di messaggistica per migliorare le prestazioni di una homepage. Tuttavia, questo garantirà fedeltà e fiducia da parte dei consumatori?

Tre insidie ​​comuni durante la progettazione di home page

Le aziende, e per estensione i designer, si imbattono in tre insidie ​​principali durante la creazione di una home page:

1. Non si concentrano sulle cose importanti. Raccontano alle persone tutto sulle caratteristiche del loro servizio o prodotto. Alla gente non importa di questo. Vogliono sapere che l'azienda risolverà il loro problema e migliorerà la loro vita.
2. Le aziende non comunicano chiaramente il loro messaggio. Come dice Tony Haile di Chartbeat, un sito web ha meno di 15 secondi per catturare l'attenzione di un visitatore.
3. Hanno un prodotto scadente che non risolve il problema di nessuno. Non c'è molto che un designer possa fare per un'azienda se questo è il caso.

Qual è il framework StoryBrand?

Nonostante ciò che alcune aziende sembrano credere, un logo non è uguale a un marchio. Lontano da esso; un marchio è una promessa dietro la quale si cela la ragione per cui esiste.

Le persone scelgono un marchio piuttosto che un altro per ragioni sia razionali che emotive. Una potente messaggistica del marchio può produrre fedeltà al marchio stesso piuttosto che solo ai singoli prodotti che crea. Un messaggio chiaro e coerente è fondamentale per raggiungere tale scopo. Ciò che distingue un marchio dalla concorrenza è la storia del marchio.

Lo storytelling è ampiamente utilizzato dagli imprenditori per sedurre gli investitori in presentazioni e social network. Aziende come Apple comprendono e integrano il potere di una narrazione chiara e semplice in tutto ciò che fanno. Sanno che non si tratta di loro; si tratta dei loro clienti.

Il framework StoryBrand è una formula di narrazione creata da Donald Miller per aiutare le aziende a comunicare i loro messaggi più potenti in modo semplice e chiaro. Nel suo libro Building a Story Brand , Miller afferma: "Il tuo cliente dovrebbe essere l'eroe della storia, non il tuo marchio. Questo è il segreto che ogni azienda di successo fenomenale comprende".

Come utilizzare StoryBrand con un cliente

Che si tratti di una piccola azienda o di un marchio multimilionario, il cliente deve capire che confondere i propri clienti gli costerà denaro. Chiarire il loro messaggio attraverso la formula StoryBrand, come dice Miller, "organizzerà il loro pensiero, ridurrà i loro sforzi di marketing, cancellerà la confusione, terrorizzerà la concorrenza e finalmente farà crescere di nuovo la loro attività".

Miller paragona la costruzione di uno StoryBrand allo scrivere una storia per una sceneggiatura. Lo scompone in sette punti della trama.

Un personaggio che desidera qualcosa (la persona che utilizza il sito Web) incontra un problema (il suo bisogno), quindi incontra una guida (l'azienda) che gli fornisce un piano (indica i passaggi successivi) e lo chiama all'azione (pulsante di invito all'azione), che si traduce in una storia di successo (acquistano il prodotto) e li aiuta a evitare il fallimento (promemoria di cosa accadrebbe se non acquistano).

Questa struttura può essere riconosciuta in quasi tutti i film di successo. Può anche applicarsi a un'azienda e ai suoi clienti. Il passo successivo è che il cliente scriva la storia del proprio marchio seguendo questa struttura:

1. Un personaggio : il cliente è sempre l'eroe della storia, non il marchio. Spetta ai designer UX capire cosa vogliono i clienti dal marchio, di solito attraverso la ricerca UX e i test degli utenti. Devono concentrarsi sui desideri che guidano le persone, cose come la conservazione delle risorse finanziarie, il risparmio di tempo, la creazione di reti sociali o l'acquisizione di status.
2. Ha un problema : il cattivo nell'arco di StoryBrand è il problema del personaggio. È utile personificare quel problema e capire che i prodotti dell'azienda sono come le armi che il cliente può usare per sconfiggerlo. Le aziende tendono a concentrarsi sulla risoluzione dei problemi esterni, ma i clienti acquistano soluzioni ai problemi interni . Le persone hanno tre livelli di conflitto:
   - Esterno (la maggior parte delle aziende cerca di risolvere problemi esterni)
   - Interno (come frustrazione, intimidazione, insicurezza)
   - Filosofico (perché questa storia è importante?)
3. E incontra una guida : la guida è l'azienda o il marchio. I clienti hanno bisogno di qualcuno che si occupi del problema. La loro percezione del marchio sarà cruciale per la loro fiducia. Bisogna comunicare due cose:
   - Empatia (mostra comprensione del dolore che il cliente può provare)
   - Autorità (darà al cliente fiducia che il marchio è in grado di aiutarlo)
4. Chi dà loro un piano : l'azienda mostra al cliente cosa deve fare dopo. I clienti non sono ancora sicuri se acquistare fino a quando non viene mostrato un semplice piano d'azione. I designer UX possono precisare i passaggi successivi esatti per i clienti. Possono anche alleviare qualsiasi ansia che il cliente potrebbe avere affrontando le preoccupazioni relative al prodotto o servizio.
5. E chiamali all'azione : inviti all'azione efficaci facilitano gli acquisti o le iscrizioni.
6. Questo li aiuta a evitare il fallimento : qual è la posta in gioco per il cliente? Cosa perderanno se non acquistano da questo marchio?
7. E si conclude con un successo : racconta ai clienti come questa azione specifica può cambiare la loro vita. Mostra loro come sarà la loro vita dopo aver acquistato il prodotto e come li farà sentire quella decisione. Tre solidi modi in cui i narratori concludono una storia sono permettere al personaggio di:
   - Vinci potere o posizione
   - Trova qualcuno o qualcosa che li renda integri
   - Sperimenta una forma di autorealizzazione che li renda anche integri

Come utilizzare StoryBrand Framework in una home page

Una home page non dovrebbe mai riguardare il business. Dovrebbe riguardare il suo potenziale cliente.

Come al primo appuntamento, le impressioni sono importanti e l'obiettivo è generare interesse. I designer di UX devono essere strategici in quali contenuti sono inclusi e come sono organizzati. Seguire il framework come spiegato nella sezione precedente aiuterà i progettisti a garantire che i messaggi giusti siano inseriti nei posti giusti.

Anche se può sembrare semplicistico, ci sono solo cinque elementi importanti da tenere a mente quando si progetta una home page.

Il titolo

I titoli, a volte utilizzati in combinazione con un'immagine accattivante, vengono inseriti nella parte superiore di una home page. In quasi tutti i casi, i titoli dovrebbero essere incentrati sul cliente e mostrare al visitatore che il marchio ha qualcosa che lo avvantaggia. I titoli dovrebbero:

• Comunicare i vantaggi al cliente
• Identifica un problema che il visitatore ha e rassicuralo che il marchio può risolverlo per lui
• Descrivi cosa fa l'azienda in modo chiaro e conciso

Crea fiducia mostrando autorità

È fondamentale posizionare l'azienda come guida e soluzione al problema del cliente. I designer UX che padroneggiano l'arte di creare fiducia avranno più facilità a convincere le persone che questo particolare marchio è la giusta soluzione ai loro problemi. Possono farlo:

• Comprese testimonianze di importanti clienti che consigliano il marchio
• Visualizzazione dei loghi delle aziende con cui il marchio ha collaborato
• Mostrare dati specifici sul numero di utenti, transazioni, ecc.
• Con premi e riconoscimenti, opere pubblicate, apparizioni sui media e risultati simili
• Visualizzazione delle immagini del team o della sede dell'azienda

Chiamare all'azione

Creare una connessione emotiva con i visitatori della home page è il primo passo per convertirli in clienti. Una volta stabilita la connessione emotiva, tocca all'invito all'azione concludere l'accordo.

Esistono due tipi di inviti all'azione:

1. Gli inviti all'azione diretti sono rivolti a persone che sanno di essere pronte per acquistare o registrarsi e includono un linguaggio come "Acquista", "Registrati" o "Inizia". Facendo clic su queste CTA, l'acquirente verrà indirizzato direttamente a un modulo per completare la transazione.
2. Gli inviti all'azione di transizione sono rivolti ai visitatori che non sono ancora pronti per l'acquisto. Potrebbero aver bisogno di più tempo e informazioni prima di impegnarsi. Questi si presentano sotto forma di pulsanti "Maggiori informazioni", "Prova gratuitamente" o "Contattati".

Alcuni inviti all'azione possono combinare i due o metterli uno accanto all'altro (spesso visti come una coppia di pulsanti "Acquista ora" e "Ulteriori informazioni").

Immagini coinvolgenti

Indipendentemente dalla gravità del contenuto di una home page, il framework StoryBrand richiede un lieto fine. Quando selezioni le immagini, tieni presente che alcune di esse dovrebbero dare quella sensazione di "felici e contenti".

Le immagini attirano le emozioni dei visitatori, in particolare le immagini di persone felici. Mostrare foto di persone felici aiuta le persone a immaginare come potrebbe essere il loro lieto fine se effettuano l'acquisto.

Testo breve

Meno testo, meglio è. Molti consumatori non leggeranno lunghi blocchi di testo, quindi è meglio trasmettere il messaggio del marchio con il minor numero di parole possibile.

I designer UX dovrebbero aiutare i clienti a condividere la loro storia nel modo più semplice.

Le home page di successo rispondono alle domande chiave

Una homepage di successo sarà in grado di catturare l'interesse dei visitatori in meno di cinque secondi. Da lì, avranno circa 15 secondi per rispondere alle tre domande che le persone si pongono (spesso inconsciamente) quando visitano una home page:

• Cosa fanno?
• Come possono aiutarmi?
• Cosa devo fare per acquistare o impegnarmi?

I designer UX possono utilizzare il framework StoryBrand per creare una homepage che catturi immediatamente l'interesse e risponda a queste domande in modo efficace. Offre un percorso chiaro per il successo sia per il designer che per il marchio.

Fateci sapere cosa ne pensate! Si prega di lasciare i vostri pensieri, commenti e feedback qui sotto.

• • •

Ulteriori letture sul blog di Toptal Design:

• Valgono tutte le tendenze? I 5 errori UX più comuni che commettono i web designer
• Come progettare una pagina di destinazione efficace
• Costruito per convertire: best practice per la progettazione di pagine di destinazione
• La guida definitiva alla progettazione di siti Web di e-commerce
• La guida completa all'architettura dell'informazione