Design della pagina di destinazione: costruire la pagina di destinazione definitiva

Una pagina di destinazione efficace è fondamentale per il successo di un prodotto

Il marketing è un concetto estraneo alla maggior parte dei designer e sviluppatori. Eccelliamo nello sviluppo del prodotto e nelle sfide tecniche, ma quando arriva il momento di promuovere un prodotto, non siamo molto esperti.

Ma il marketing è fondamentale per il successo di un prodotto e non deve essere trascurato. Questa è stata la sfida mentre progettavo e mi preparavo a lanciare la tastiera più importante al mondo per gli sviluppatori, la Ultimate Hacking Keyboard.

Per fortuna, facevo parte di un team che ha capito l'importanza di una landing page attraente, soprattutto nei mesi precedenti la nostra campagna di crowdfunding make-or-break. Insieme, abbiamo deciso di progettare una pagina di destinazione che catturasse l'immaginazione, generasse abbonati e preparasse il nostro prodotto per un lancio di successo.

Questa è la storia della pagina di destinazione definitiva per The Ultimate Hacking Keyboard.

Consiglio tecnico. Passi pratici in avanti.

Una ricerca su Google per "design della pagina di destinazione" porta a dozzine di articoli eccellenti, ognuno ricco di suggerimenti importanti come:

• "Il contenuto dovrebbe essere caricato in un attimo."
• "La fotografia dovrebbe essere rilevante per il pubblico del sito".
• e "Includi un modulo per raccogliere lead".

Questi sono punti utili, ma ci sono più fattori per il successo della pagina di destinazione. Questa guida alla progettazione della pagina di destinazione fornirà consigli tecnici, ma offrirà anche spunti pratici che aiuteranno designer e sviluppatori a scegliere i giusti servizi di terze parti e a integrare tecnologie che funzionano dietro le quinte.

In definitiva, l'obiettivo di questa guida è quello di far risparmiare tempo e denaro a progettisti e sviluppatori, che altrimenti potrebbero essere sprecati in tentativi ed errori inutili.

Obiettivo per la produzione e l'hosting di video di fascia alta

Presentare video sul Web è più facile che mai, ma relativamente pochi siti lo utilizzano. Dal punto di vista web, non è una sfida tecnica, ma un investimento di risorse: tempo e denaro.

Il video del trailer della pagina di destinazione per Ultimate Hacking Keyboard (UHK) ha subito dodici iterazioni, con ogni nuova versione che ha gradualmente perfezionato ogni piccolo dettaglio. Il processo di progettazione è stato estenuante ma gratificante e il video trailer è il fiore all'occhiello della nostra landing page. Differenzia completamente il nostro prodotto dal resto della confezione.

Tieni presente che la creazione di contenuti di alta qualità è costosa. Professionisti specializzati possono far brillare un prodotto, ma è importante capire cosa puoi permetterti; in caso contrario, il tuo prodotto potrebbe accumularsi prima che si alzi da terra.

Se tu o un altro designer del tuo team avete le competenze e le attrezzature, potresti provare a creare i tuoi contenuti video, ma mantieni i video brevi e semplici. Le produzioni eccessivamente ambiziose nelle mani di dilettanti raramente vanno bene.

Il team di UHK ha optato per un'animazione 3D dinamica per dimostrare le funzionalità di base della tastiera sulla nostra pagina di destinazione. Se è necessaria un'animazione 2D (per un'app o un servizio Web) o se sono necessarie riprese della telecamera live-action, il processo presenterà diverse sfide.

Una volta che un video è stato realizzato, deve essere ospitato su un sito web. Per fortuna, ci sono molte opzioni:

YouTube è leader indiscusso di mercato e sinonimo di video sul web. È un servizio capace e una scelta ragionevole, ma il suo lettore integrato non è l'opzione esteticamente più gradevole.

Vimeo presenta un lettore incorporato con un design minimalista piuttosto elegante. È noto per ospitare contenuti di qualità e fornire un'alta definizione superiore.

Wistia è un'altra scelta popolare tra i marketer. Fornisce funzionalità avanzate come mappe di calore video che mostrano quali parti di un video sono state guardate, saltate e riviste.

Alla fine, il team di UHK ha deciso che Vimeo soddisfava al meglio le nostre esigenze. Ecco il trailer della nostra pagina di destinazione: Ultimate Hacking Keyboard

Vale anche la pena notare che ci siamo tuffati nell'Application Programing Interface (API) di Vimeo per aiutare il nostro video a catturare meglio l'attenzione dei visitatori della pagina di destinazione. Utilizzando l'API JavaScript di Vimeo, abbiamo fatto in modo che i pulsanti "Ne voglio uno" sul nostro sito pulsassero tre volte di seguito dopo la fine del trailer. Se usate correttamente, piccole modifiche come questa possono aumentare i tassi di conversione della pagina di destinazione.

Crea un'esperienza coinvolgente con i contenuti 3D

A volte è importante fornire ai visitatori della pagina di destinazione un'esperienza coinvolgente. Volevamo che i nostri visitatori potessero esplorare la Ultimate Hacking Keyboard in 3D, quindi abbiamo dovuto indagare sui servizi basati su WebGL creati appositamente per questo scopo.

Sketchfab è il servizio basato su WebGL più popolare. È facile da padroneggiare, fornisce una serie di impostazioni visive ed è integrabile in un'ampia gamma di servizi di hosting popolari.

P3d.in è un semplice servizio WebGL incentrato sulla facilità d'uso, ma ha un supporto limitato per alcune trame ad alta risoluzione.

Dopo un'attenta considerazione, abbiamo scelto Sketchfab. Ecco come appare la Ultimate Hacking Keyboard in 3D.

Visualizza problemi e soluzioni con le animazioni 2D

Uno dei principali vantaggi della Ultimate Hacking Keyboard è che riduce drasticamente il movimento della mano. Il team ha voluto visualizzarlo sulla nostra pagina di destinazione visualizzando un'animazione dell'UHK che lavora fianco a fianco con una normale tastiera. Implementare questo non è stato così semplice come sembra.

L'uso di un video incorporato sembrava eccessivo e richiederebbe anche il lavoro extra di rendering. Le GIF animate non erano un'opzione a causa delle loro enormi dimensioni del file e della tavolozza dei colori limitata. Alla fine, abbiamo scelto di lavorare con le animazioni SVG in linea perché consentivano alla grafica delle nostre mani di muoversi indipendentemente dalle altre immagini sulla pagina.

Creare l'animazione della nostra pagina di destinazione in questo modo ha richiesto più tempo di quanto ci aspettassimo. Abbiamo dovuto affrontare problemi cross-browser, bug della libreria JavaScript e altre sfide tecniche impreviste solo per creare una semplice animazione. Tuttavia, il risultato finale sembra piuttosto bello e si è rivelato valere il lavoro extra.

Una parola per il saggio: non sottovalutare mai il numero di cose che possono andare storte!

Misura l'analisi in tempo reale

Google Analytics è fantastico. È ampiamente utilizzato e facile da lavorare. Tuttavia, ci sono candidati migliori per le operazioni in tempo reale.

Chartbeat fa un ottimo lavoro inviando notifiche quando un sito Web supera determinate soglie, in particolare il numero di utenti simultanei su un sito. Ad esempio, il sito UHK è occasionalmente collegato a forum online, generando improvvisi picchi di traffico. Grazie a Chartbeat, lo sappiamo subito e siamo in grado di unirci alla conversazione in corso in anticipo.

Mixpanel aiuta gli amministratori web ad analizzare eventi come le visite al sito, l'apertura di una finestra di dialogo di sottoscrizione e la conferma di una sottoscrizione. Può anche creare canalizzazioni da questi eventi e visualizzare i tassi di conversione, rendendo così i numeri utilizzabili.

Clicky fornisce una fantastica funzione di mappa termica che rivela dove i visitatori fanno clic su un sito. Sulla base dei risultati, è possibile apportare miglioramenti al layout o al contenuto di un sito per ottenere risultati migliori.

HotJar consente ai proprietari di siti Web di registrare le interazioni dei loro visitatori salvando ogni azione del mouse e della tastiera e trasformandole in video.

Ciascuno di questi servizi ha le sue caratteristiche e vantaggi unici, ma tutti forniscono un feedback prezioso e immediato sull'attività dei visitatori di un sito web. Spetta alle singole aziende determinare quale tipo di informazioni è più prezioso per scopi di marketing.

Registra errori e previeni mal di testa non necessari

I siti web stanno diventando sempre più dipendenti da JavaScript, tanto che le funzionalità critiche del sito spesso dipendono da esso. Ad esempio, la finestra di dialogo di iscrizione sulla pagina di destinazione di Ultimate Hacking Keyboard viene attivata dal codice JavaScript.

Quando abbiamo implementato la funzione di abbonamento, l'abbiamo testata sui principali browser e siamo stati sicuri di aver fatto tutto ciò di cui avevamo bisogno. Successivamente, tuttavia, abbiamo ricevuto un'e-mail da un visitatore che si lamentava del fatto che la funzione di abbonamento alla pagina di destinazione non funzionava.

Come si è scoperto, il visitatore in questione stava utilizzando Adblock Plus nella sua modalità più rigorosa, che ha bloccato lo script di analisi Clicky. A differenza di altri servizi di analisi, il codice di incorporamento di Clicky non era resiliente sotto questo aspetto, quindi dopo aver registrato l'azione di abbonamento e facendo riferimento all'oggetto Clicky, il codice ha generato un errore.

Dopo questo incidente, abbiamo riflettuto attentamente su come evitare situazioni simili in futuro. Al team è venuto in mente che avremmo dovuto utilizzare il gestore di eventi globale window.onerror per rilevare e registrare tali errori. Quindi abbiamo cercato servizi di registrazione adeguati e abbiamo finito per scegliere Errorception.

Errorception è sorprendente perché fa un lavoro e lo fa straordinariamente bene: trovare errori JavaScript. La sua interfaccia utente è minimalista e funzionale, il supporto è ottimo e consente all'amministratore del sito di visualizzare i singoli errori e indagare sulle tracce dello stack. Soprattutto, fornisce un vero e proprio botto per i tuoi soldi.

Dall'integrazione di Errorception, abbiamo risolto circa una dozzina di bug, alcuni dei quali erano improbabili e inaspettati. Ad esempio, una volta abbiamo ricevuto un errore relativo a localStorage e abbiamo scoperto che quando Safari è in modalità di navigazione privata, localStorage.setItem() genera un errore.

È impossibile tenere conto di ogni caso di errore anomalo, quindi la registrazione è un ottimo modo per catturare i difetti prima che diventino gravi grattacapi.

Progetta un processo di costruzione a bassa manutenzione

Inizialmente, la pagina dell'indice UHK è iniziata come una singola pagina HTML ospitata in WordPress e conteneva tutto il codice CSS, HTML e JavaScript. All'inizio si trattava di una soluzione fattibile, ma man mano che la pagina cresceva, diventava un onere di manutenzione ed era necessario un approccio più modulare.

La nostra soluzione? Innanzitutto, dividiamo il codice CSS, HTML e JavaScript in un numero di file separati. Quindi, abbiamo convertito i file CSS in file Less per rendere la manutenzione ancora più semplice. Infine, abbiamo ideato un processo di compilazione per assemblare tutti i nostri piccoli file.

Ottimizza sempre per le prestazioni

Il team UHK sa per esperienza che le prestazioni del sito Web sono fondamentali, come quando la nostra pagina di destinazione è stata barrata e abbiamo ricevuto 260 visitatori contemporaneamente. Per fortuna, il nostro VPS Linode da $ 20 al mese si è comportato come un campione, ma ciò ha richiesto più della fortuna cieca, quindi ecco un paio di suggerimenti per aumentare le prestazioni:

• Il caricamento lento delle immagini è tuo amico, soprattutto se la tua pagina, come la nostra, contiene molte immagini. Stiamo utilizzando il plug-in Unveil Lazy Load di WordPress.

• Puoi anche caricare le risorse in modo pigro. Se una sezione di una pagina dipende da uno script aggiuntivo, è possibile caricarla lazy quando entra nel viewport. Controlla la visibilità del viewport con il plug-in jQuery inview e carica lo script con jQuery.getScript() o qualsiasi altro caricatore di script.

Il design della pagina di destinazione è una disciplina di progettazione vitale

Abbiamo affrontato alcuni problemi di progettazione della pagina di destinazione in questo post, quindi riassumiamo i punti più importanti:

• Vai oltre i contenuti basati su testo e includi contenuti multimediali come video, modelli 3D e animazioni 2D. Questo tipo di contenuto rende una landing page più coinvolgente e incoraggia i visitatori a condividere con gli altri.
• Utilizza l'analisi in tempo reale in modo da poter reagire rapidamente a picchi di traffico improvvisi e partecipare alla conversazione in corso.
• Registra sempre gli errori. Ci sono molte cose che possono (e andranno) storte, quindi è importante tenerne traccia.
• Ottimizza le prestazioni in modo che il tuo sito mantenga il passo anche con i carichi di traffico più elevati.

Come per ogni disciplina di progettazione, la progettazione della pagina di destinazione richiede un impegno continuo nell'apprendimento di nuovi strumenti, tecniche e processi. La tecnologia e i gusti si evolvono inevitabilmente: l'avanguardia di oggi è la reliquia di domani.

Per fortuna, il design della pagina di destinazione che comunica chiaramente e affascina il pubblico non dipende interamente dalla tecnologia. I designer esperti sanno come incorporare gli strumenti più recenti, ma il loro processo di progettazione è guidato principalmente dal porre le domande giuste e dall'esplorazione abilmente dei problemi che minacciano di far deragliare un progetto.

In definitiva, una pagina di destinazione attraente deve essere una parte essenziale del piano di marketing di qualsiasi nuovo marchio o prodotto. Nel nostro mondo basato sul web, una landing page ben progettata ha la capacità di creare un seguito, generare buzz e aumentare le vendite, tutti elementi vitali per la prosperità continua di un'azienda emergente.