[New Style] Landing Page - Tra monopagina e minisito...

stuart

[New Style] Landing Page - Tra monopagina e minisito...

Al **Raduno GT **che si è tenuto il passato weekend, **Giorgio **, durante la mia presentazione, ha fatto menzione di una landing page particolare creata in occasione dell'uscita di un'applicazione php in vendita -per il mercato estero- su googlerank.com

La particolarità di questa landing page è lo scrolling fluido della pagina, ottenuto tramite javascript. Sia come webmaster che come utente, ho sempre detestato il behaviour del browser con le àncore interne, ossia un movimento istantaneo della pagina (verso l'alto o verso il basso) non appena si clicca su un link. Pur comprendendone l'enorme utilità per una gran quantità di risorse (glossari, guide....).
Personalmente ho ritenuto inserire uno scrolling più fluido della pagina un miglioramento estetico della visione e consultazione dei contenuti della pagina.

Why

Non sono mai stato un grande fan dello stile "monopagina" americano, introdotto e teorizzato successivamente da Madri in italia e usato con successo da tantissimi webmaster e marketeer.
Devo però ammettere che il successo (in termini di vendita o più in generale di azione compiuta dall'utente) di un bene o servizio, spesso non può prescindere da questo tipo di presentazione: 1) pagina unica, 2) assenza di navigazione e/o link che portino all'esterno, comunicazione persuasiva e (spesso) altisonante.

Allo stesso tempo esiste un approccio più soft ed esaustivo, preferito da molti webmaster (tra cui il sottoscritto) che consiste nella creazione di un "minisito" a supporto di un prodotto o servizio.
4 o 5 pagine web di descrizione (le classiche overview, features, immagini, prezzi...ecc.) legate da una navigazione interna. L'utente naviga attraverso i contenuti del minisito e, quando (e se) sufficientemente convinto, compie l'azione prevista (acquisto, iscrizione, richiesta info).

Nella realizzazione di questa landing ho cercato un giusto compromesso tra la struttura classica a monopagina (che secondo la mia modesta esperienza si è dimostrata più efficace nella maggior parte dei casi) e la suddivisione logica e libertà di fruizione dei contenuti possibile solo con un minisito.

Il risultato è stato questo:
**http://x.googlerank.com

How

**Per i maligni che stanno pensando ad un'abile mossa per promuovere il prodotto presentato nella landing, lo script non è in vendita in italia. Per utenti italiani è a disposizione gratuitamente contattando me o kerouac3001 in PM. Si prenda quindi l'URL sopra citato come esempio di applicazione dello scrolling e come esercizio di stile.

Per implementare lo smooth scroll è sufficiente scaricare le classi javascript che allego:

download Classes.zip

Decomprimere l'archivio, copiare e incollare la cartella "classes" nella stessa directory che contiene la Vs landing page.

Nella sezione HEAD della pagina, richiamare le classi js contenute nella cartella "classes"

<script type="text/javascript" src="classes/prototype.js"></script>
<script type="text/javascript" src="classes/attitude.js"></script>
<script type="text/javascript" src="classes/moo.fx.js"></script>
<script type="text/javascript" src="classes/moo.fx.pack.js"></script>
<script type="text/javascript" src="classes/m4m.set.js"></script>

Prima della chiusura del tag </body>, quindi al termine del Vs codice HTML, richiamate la funzione "attitude"

<script type="text/javascript">Attitude.start();</script>
</body>
</html>

** That's it.**
Ho testato il funzionamento dello scrolling su IE 6, Firefox 1.5 e Mozilla 1.6
Mi manca Safari per Mac (sorry).

Fatto questo, il movimento della pagina cliccando sui link che portano ad àncore interne non sarà più quello tradizionale scattoso, ma scorrerà in verticale rallentando e fermandosi in prossimità dell'àncora.

esempio di named anchor

<a name="faq" id="faq"></a>
``` esempio di link interno

Insomma, niente di diverso dal vecchio classico html (infatti E' proprio il classico vecchio html)
Per chi naviga con i javascript disabilitati, la pagina sarà comunque navigabile.

**Credits

**L'effetto scrolling è reso possibile dalla libreria di effetti in javascript [**moo.fx**](http://moofx.mad4milk.net) creati da Valerio Proietti di [http://www.mad4milk.net/](http://www.mad4milk.net/)

Le classi sono rilasciate sotto [MIT-style LICENSE](http://www.opensource.org/licenses/mit-license.php)


**Considerazioni

**Non è mia intenzione stabilire nuovi standard o contrastare gli approcci attualmente più utilizzati ed efficaci (non potrei mai, sono un pessimo *trend-setter*). Tanto più che devo ancora iniziare una promozione *seria* della landing prima esposta, quindi non sono ancora in grado di valutarne l'effettivo potere di conversione (questo dipende anche da tantissimi fattori).

Ho proposto un piccolo *widget*, che se utilizzato al meglio può porsi come una via di mezzo tra landing tradizionale (monopagina, senza link di "distrazione") e minisito (informazioni organizzate logicamente)


Cordialmente,
Stuart

piernicola

@Stuart said:

Al **Raduno GT **che si è tenuto il passato weekend, **Giorgio **, durante la mia presentazione, ha fatto menzione di una landing page particolare creata in occasione dell'uscita di un'applicazione php in vendita -per il mercato estero- su googlerank.com

Faccio parte del cerchio di privilegiati che ha avuto l'onore di vederla un bel pò di tempo prima del raduno, ed ora come allora il mio parere è: bellissima!

Infatti voglio testare un approccio del genere anche per i miei prodotti... testerò e farò conoscere i risultati.

GRAZIE per aver condiviso questa innovazione che, secondo me, farà scuola.

nelli

benvenuto stuart in web marketing, è un onore averti qua
ovviamente ti ringrazio a nome di tutti per aver non solo riportato l'esempio, ma anche dato spiegazioni sul come.
detto questo veniamo a ciò che proponi.

ti avevo sentito parlare di questo scrolling al raduno e in effetti è davvero bello. mi domando l'effetto che possa fare sull'utente finale. visto che è una novità, rimarrà disorientato? piacevolmente colpito? passati i primi 5 secondi sarà già immune a questa novità? che effetto farà sulla sua propensione all'acquisto/lettura/registrazione o altra azione che vogliamo compia?

altre considerazioni..
la prima sulla velocità di scorrimento. mi domando se uno scorrimento più lento sarebbe fastidioso (e magari rischierebbe di far credere a chi naviga che può anche interrompere l'azione con il mouse) oppure sarebbe più gradevole.

e una domanda: **come mai il testo non parte subito sotto **i link? anche ammesso che tu volessi far ammirare la parte grafica con le fiamme (bella), perchè non hai posizionato il testo immediatamente sotto ad esse? il primo paragrafo (intro) è piuttosto in basso nella navigazione. è un modo per creare ancora più effetto nella discesa della pagina?

il dilemma che poni fra landing paginona-unica-da-scorrere-a-mano e minisito non è questione da poco. ho la sensazione che statisticamente funzioni di + il primo modello, ma sarei felice se qualcuno che legge questa discussione portasse esempi vincenti costruiti sul modello che tu ami o ancora meglio testasse il tuo nuovo strumento.

di sicuro il tuo contributo permette di sperimentare vie di mezzo

grazie

spero che molti dicano la loro!

ps - ovviamente complimenti

stuart

@"Piernicola" said:

Infatti voglio testare un approccio del genere anche per i miei prodotti... testerò e farò conoscere i risultati. E' già stata implicitamente messa in coda alla todo-list

@"nelli" said:

visto che è una novità, rimarrà disorientato? piacevolmente colpito? passati i primi 5 secondi sarà già immune a questa novità? che effetto farà sulla sua propensione all'acquisto/lettura/registrazione o altra azione che vogliamo compia? Spero in un piacevole disorientamento di stupore, unito all'immunizzazione dopo 5 secondi che porti l'utente a concentrarsi sui contenuti, invece di autoipnotizzarsi cliccando compulsivamente sui link

Sull'effettivo potere di conversione, tra un migliaio di visite (al netto di quelle provenienti da giorgiotave.it e da amici/parenti) potrò dare qualche numero. Non ho mica inserito Analytics nel codice della landing e della thankyou page solo perchè fa figo

@"nelli" said:

e una domanda: **come mai il testo non parte subito sotto **i link? A parte mostrare le hotrod flames per intero (mi sono costate ben $ 1,00!), mi piaceva l'idea di "discesa" tra le fiamme, attraverso il layout che parte nero e diventa rosso-sangue.

Se avessi dovuto promuovere un prodotto/servizio diverso, avrei -forse- inserito i testi della pagina nella loro posizione abituale (sotto l'header, per intenderci).

@"nelli" said:

il dilemma che poni fra landing paginona-unica-da-scorrere-a-mano e minisito non è questione da poco. ho la sensazione che statisticamente funzioni di + il primo modello, ma sarei felice se qualcuno che legge questa discussione portasse esempi vincenti costruiti sul modello che tu ami o ancora meglio testasse il tuo nuovo strumento.

di sicuro il tuo contributo permette di sperimentare vie di mezzo

Sulle vie di mezzo, è ciò che spero
Concordo sulla migliore resa (almeno per quanto ho finora visto) del paginone unico. E' il motivo per cui non me ne sono discostato.

@"nelli" said:

ps - ovviamente complimenti
E di che!

Cordialmente,
Stuart

tuonorosso

E' normale che mi vada a scatti?

obeah.man

Ciao Stuart,

prima considerazione a caldo sul layout della pagina: ***it's just cool!

***Davvero, gran bello stile. La grafica *spacca.

*Provo a raccontarti un po' della mia esperienza di navigone, *k?

*Nonostante la mia connessione a 4 Mega la pagina ha impiegato un po' a caricarsi, ma pazienza.

Poi la vedo.. **cool! **(e due;)) e leggo:

***"Sick of being a good guy? We are."
****And I'm like **yeaaah!! ***>> **click **>> ah! è solo un'immagine..

Vedo **X+ **
Articially Intelligent Automatic Page Generation

 **Natural language gateway / doorway pages search engines will simply... adore**

**yeaaah again!! **>> **click **>> ah! non è un link..

Scrollo in basso, non vedo testo, mah?!
Penso sbaglio io, Stu ha fatto una landing, voglio vederla.
Ok, ho capito. Devo cercarmi un link, li vedo! **click **(uff)

Scelgo Features, io sò cos'è un doorway page generator, o no?!?
Scorro il testo, faccio un po' fatica a leggerlo, quindi cerco di capire al volo cosa mi offrite e, guarda un po', mi trovo a pensare:

**cool !! **(adesso basta eh?!) **let me see how many bucks for it!

**Non trovo risposta.. provo a scrollare.. ecco!! (Poi ho capito che avrei potuto cliccare "Download").
Il prezzo è accessibilissimo, la compro.
(Chissà perchè penso LA compro, mah?!)

Visto che la landing è tua adesso però la voglio leggere tutta, guardarmela bene. Trovo diverse informazioni, esaustive direi.

Magari mi sbaglio, ma vista la valuta che hai scelto per gli acquisti, direi che il target geografico è prevalentemente Nord Americano (come darti torto) e questo mi porta a pensare al linguaggio che utilizzi. Molto british, ad eccezzione di quel *"You ain't never gonna be alone". *Certo non è una gran cosa però..

Secondo me sarebbe una grande miglioria invece trasformare l'header in un link, magari ad una pagina dai contenuti più stringati, e con ben in mostra i pulsanti Buy Now.

Più in generale, inserirei un box con un bel **"Buy Now" **che segue la navigazione al margine sx o dx (che preferisco) della pagina.

Obeah Man

piernicola

@Obeah Man said:

Più in generale, inserirei un box con un bel **"Buy Now" **che segue la navigazione al margine sx o dx (che preferisco) della pagina.
Obeah Man

Al raduno abbiamo già parlato di qualcosa di molto simile (spero che Stuart se ne ricordi:))

Ps @stuart: got mail

stuart

Ciao **Obeah Man

**Interessante l'esperienza di navigazione (direi COOL! :D)

Al di là del "you ain't never..", ho scritto molto di getto i contenuti e rileggendola molto velocemente 2 minuti fa mi sono accorto di almeno 3 typos e 2 errori di ortografia gravi (write **AT **... orrendo!).

Ti confermo che lo script è in vendita all'estero, in italia è gratuito (linkware, aggiungerei). Diversamente non avrei mai osato postarla in web marketing (ho tanti difetti ma non sono uno spammer ;)).

Ripeto, è solo un esempio pratico a puro supporto delle classi javascript scaricabili da questo thread. Per fare vedere il lavoro finito, insomma.

Le possibilità di utilizzo dello scrolling interno, ai fini della creazione di landing monopagina con navigazione, sono infinite. Anche meglio dell'esempio che ho postato

Cordialmente,
Stuart

paocavo

la vedrei ottima come soluzione anche per i forum (col menu di navigazione - sottilissimo - all'inizio di ogni post...sopratutto se sono di agoago )

inuyaksa

Secondo me i siti monopagina, come questo, hanno un difetto.
Non si può più usare il tasto "indietro" del browser.
E credo che questo possa limitarne l'utilizzo ad un grossa fetta di utenti abituati, quasi come fosse una verità assoluta, usare solo e soltanto quel tasto per tornare indietro.

ellegi

Ciao Stuart, la novità lascia stupiti.
Tanto stupiti però da creare un attimo di smarrimento nella navigabilità.

Nel tuo caso la grafica è molto bella e accattivante, e ti voglio dire la mia prima impressione, sempre che ti faccia piacere il mio parere :).

1.Nella intro i link sono quasi fusi nel testo per cui non ci si rende subito conto di dove cliccare.
2.Nella seconda pagina i link non sono più nella posizione di prima, ma leggermente spostati ma si capisce meglio dove sono.
3.Con la mia risoluzione video (1280x1024) vedo già parte della pagina successiva, non so se sia voluto.
4.Altro problema da me riscontrato è dovuto al fatto che cliccando sulle varie sezioni non si capisce dove mi trovo, a mio avviso lascerei la barra dei link sempre con tutti i link indicando con un colore differente il menù selezionato.

Per il resto mi piace, complimenti per l'idea.

p.s.: Sarei interessato al prodottino pubblicizzato

king.hack

@Stuart said:

That's it.
Ho testato il funzionamento dello scrolling su IE 6, Firefox 1.5 e Mozilla 1.6
Mi manca Safari per Mac (sorry).

L'ho testato con Safari 1.3.2 e la visualizzazione è uguale come su Firefox... tutto ok insomma

catone

Bellissima Stu! Poi ci sono i gusti, so bene della tua predelizione per il nero e/o comunque i toni dark, ma magari, sarebbe bello vederla anche con colori più chiari. La butto: perchè non creare uno switcher (ben in evidenza) per cambiare al volo i colori della stessa?

Poi, lo so sono rompiscatole, mi pare che il bordo destro sia un px più esteso del sinistro e piazzerei un bordo bianco di un px su ciascuna immagine. Lo sfondo del body mi sembra un po' carico, brucia un po' quando viene eseguito lo scrolling, lo vedrei meglio con un'opacità più bassa. Pareri personali cmq!

Poi, a livello di accessibilità, mi permetto, direi che lo scrolling è un po' troppo veloce. Immagino che cmq disattivando il js corrispondente tutto funzioni come con ancore normali.

Ad ogni modo, come al solito, un esempio per tutti!

sitionweb

Stu, che dire... è semplicemente magnifico, complimenti davvero!!

Splendida l'idea delle fiamme prima dei contenuti, danno un qualcosa di moooolto proibito...

elena

Vorrei dire anch'io la mia: non vedo nessuna miglioria rispetto alle àncore standard, anzi, non funziona il "back" del browser, che vi garantisco gli utenti usano tantissimo, e il passaggio all'informazione è più lento.
Boh, non so, io la penso così,
ciao

catone

@Elena said:

Vorrei dire anch'io la mia: non vedo nessuna miglioria rispetto alle àncore standard, anzi, non funziona il "back" del browser, che vi garantisco gli utenti usano tantissimo, e il passaggio all'informazione è più lento.
Boh, non so, io la penso così,
ciao

Ottima osservazione Elena. Il back è molto importante, ma credo sia sufficiente rivedere il js.

tambu

prototype e moofx li conoscevo già, anche se non ho mai scritto niente di mio usandoli... al massimo prendo script già fatti basati su questi framework...

...si, proprio come in questo caso
un buon lavoro, bravo!

marco.manuzio

Aspettiamo di vedere i risultati dei test.

Provo tuttavia a lanciare una previsione: sono orientato a pensare che converta di più la solita landing page di tipo sales letter lunga, senza interruzioni, senza link interni e senza suddivisioni in blocchi.

Ecco perchè:

quando scrivi una sales letter, studi l'intero testo per portare in modo fluido il cliente all'acquisto, senza interruzioni nel discorso, e incanalando il lettore in un crescendo che porta alla valorizzazione del prodotto e all'urgenza all'acquisto;
ad esempio, usando schemi come l'AIDA (Attenzione, Interesse, Desiderio, Acquisto) o il PAS (Problem, Agitation, Solution).

Mettere interruzioni nella pagina potrebbe togliere fluidità al discorso e disorientare il lettore, e quindi potrebbe ridurre la conversion.

Mettere link interni che invitano a passare rapidamente da una sezione all'altra potrebbe svincolare il lettore dalla sequenza persuasiva studiata dal copywriter, e quindi potrebbe ridurre la conversion.

Questo mi orienta a pensare che se il copywriter ha svolto un buon lavoro, la solita paginetta normale dovrebbe far vendere di più.

piernicola

@marco.manuzio said:

(cut)
quando scrivi una sales letter, studi l'intero testo per portare in modo fluido il cliente all'acquisto, senza interruzioni nel discorso, e incanalando il lettore in un crescendo che porta alla valorizzazione del prodotto e all'urgenza all'acquisto;
ad esempio, usando schemi come l'AIDA (Attenzione, Interesse, Desiderio, Acquisto) o il PAS (Problem, Agitation, Solution).

Mettere interruzioni nella pagina potrebbe togliere fluidità al discorso e disorientare il lettore, e quindi potrebbe ridurre la conversion.

Premesso che io sono quello che ama scrivere le storielle nelle landing pages e mi diverto giocando a guidare l'attenzione dei lettori un pò dove mi pare...
...il concetto di non interrompere per non togliere fluidità al discorso è logico ma non necessariamente corretto.

Una delle principali tecniche ipnotiche, infatti, è il frazionamento.

Cosa significa?
Che se ti inizio a parlare di qualcosa - ti distraggo - ricomincio a parlare.... beh.... la seconda volta mi seguirai di più della prima

Attenzione! Questo non significa che da adesso vi mettete ad interrompere le sales pages ;). Sappiate solo che è possibile, se fatto con precisione e non a caso, utilizzare l'interruzione a fini persuasivi.

Nel caso specifico della landing (che io rifarei leggermente nei testi) le interruzioni (soprattutto quella tra la prima headline e la prima parte di testo) sono fantastiche.

La frase è moltissimo ad effetto, e lo spazio di tempo per cercare le prime righe non fa altro che mettere più in profondità l'emozione creata dalla headline.

Mettere link interni che invitano a passare rapidamente da una sezione all'altra potrebbe svincolare il lettore dalla sequenza persuasiva studiata dal copywriter, e quindi potrebbe ridurre la conversion.

Questo commento mi ha fatto pensare ad una sondaggio da fare.

Prossimo post.

Questo mi orienta a pensare che se il copywriter ha svolto un buon lavoro, la solita paginetta normale dovrebbe far vendere di più.

Ma se è davvero bravo bravo bravo vende anche con una pagina fatta con la "suite" finson

duna3006

Bella lì Stuart mi piace molto..
Innovativa, diversa, dinamica...insomma non la solita landing..
Anch'io come Catone e Nelli ho qualche perplessità sulla velocità di scrolling, ma suppongo si possa abbassare..:?..più che altro credo possa "infastidire" un po' l'utente che si trova davanti a questa novità..
In effetti è un po' carica di colore e forse può appesantire un po' la navigazione..e il back deve funzionare...(anche se cliccando due volte funziona...:D)...

Cmq secondo me è da testare...e vedere che succede...vero Catone?

Ciao..