Menu

COME VENDERE ONLINE?

Landing Page e comunicazione efficace per vendere

UX monsters 2015

Trappole e mostri che ti faranno perdere risultati nel 2015.

Usi template professionali come base per il tuoi siti web in Joomla e Wordpress? Pensi che il Webdesign sia una professione morta perché ormai il livello dei template professionali è ottimo?

Ci sono 5 mostri che uccideranno le tue conversioni, scopriamo insieme come sconfiggerli per il bene dei tuoi progetti e di quelli dei tuoi clienti.

ux-monsters-2015

1. Animazioni VS Attention Ratio

I framework dei principali fornitori di template hanno da qualche mese introdotto le animazioni nei moduli. Si tratta di far comparire i contenuti mentre si scrolla, di far entrare elementi con spostamenti o fade. Alcune di queste animazioni vengono inserite come classe all'interno dei div mentre altre sono applicate di default alla struttura del tema.

Tra i miei fornitori abituali, il primo template che ho visto così credo fosse il Bluapp di Gavick e devo ammettere che all'inizio gasava sia me che ai clienti. Poi l'entusiasmo è andato scemando e ora questi effetti - abbastanza comuni - cominciano a darmi fastidio. Attenzione, non ho nulla contro le animazioni ma chi mi conosce sa che nell'ultimo anno mi sono specializzato sulle landing page.

Specializzarsi significa fare tante scelte come ad esempio rinunciare a lavori più corposi e meglio retribuiti per concentrarti su progetti che inizialmente sembrano piccoli ma alla fine ti portano via lo stesso tempo di un sito tradizionale, se non di più, ma lavorare con passione è più bello che lavorare e basta.

Quando ti specializzi, inoltre, hai il vantaggio di vedere le cose da un altro punto di vista e in questo caso di scoprire uno degli elementi più sottovalutati del webdesign ovvero l'attention ratio. Riuscire a controllare l'attenzione dell'utente è fondamentale per ottimizzare le conversioni ma risulta molto utile anche nello sviluppo dei siti web tradizionali.

Se un utente ha 5 punti di attenzione un sito web ben disegnato è in grado di farli distribuire con certezza sui punti più importanti RISPARMIANDO l'attenzione dell'utente dalle cose che possono essere trascurate. Quando il layout e sopratutto la tipografia sono ottimizzati leggere la pagina è molto più facile e piacevole.

Quando si guarda una pagina con l'obiettivo di preservare e ottimizzare l'attenzione dell'utente, qualsiasi cosa si muove è controproducente.

Una call to action animata (unico elemento nell'area visibile del sito) ci può stare, ma tutto il resto? State attenti con le animazioni.

Davvero le cose che si animano sono così importanti da meritare l'attenzione del vostro utente?

Se vi interessa approfondire l'attention ratio e vedere una bella presentazione sulle landing page, questa di Oli Gardner è fighissima.

 

 

 

2. Menu a sandwich VS menu tradizionale

Non si sa bene come sia nato ma quello che è certo è che la prima apparizione del tasto che significa "apri il menu" è avvenuta in un dispositivo mobile.

E' una buona idea, se ci pensate, perché grazie a funzioni native dell'os o a elementi come l'offcanvas questo tasto ci consente di contenere il menu (a volte lungo) in pochi caratteri e renderlo subito riconoscibile. Credo che chiunque possa capire che cliccando li probabilmente troverà il menu, se naviga con un cellulare.

Funziona un pò come una porta, non ti servono le istruzioni, ma esattamente come una porta, funziona nel suo contesto.

In una versione desktop sostituire un menu con una icona è semplicemente STUPIDO.

 

photo intro

photo

photo menu

 

Mi spiace, non c'e' altra parola per definirlo, è una cosa senza senso, fatta da qualcuno che fa qualcosa senza pensare alle conseguenze che questa scelta ha sull'eperienza dell'utente. Quando fai qualcosa devi sempre farlo per un motivo e questo motivo non può essere l'estetica.

Io stesso ho usato un menu sandwich su un sito desktop ma solo perché NON VOLEVO  e l'alternativa era il display:none.

Ma il progetto riguardava una landing page tutte pagine inserite nel menu non sono funzionali alla conversione e hanno l'unico obiettivo di generare traffico e migliorare il posizionamento della home.

Il primo template a cui ho visto questo menu su sito desktop era sempre di Gavick. Sempre Bluapp. Fortunatamente era prevista l'opzione per mettere il menu tradizionale ma credo sia comunque un errore dare agli utenti la possibilità di scegliere, indicando di default la strada sbagliata.

E' un pò come in quei paesi che hanno un tasso di donatori di organi altissimo. All'inizio si può pensare che le persone siano semplicemente più civili e generose ma analizzando la situazione si scopre che il tasso di donatori è così alto SOLO PERCHE' di default, il consenso non deve essere esplicito ma solo presunto. In pratica puoi scegliere di "non donare" ma per fare ciò devi compiere un'azione mentre, di default, sei donatore (per maggiori info c'e' questo post su Psicocafe).

Mettere il menu hamburger in un sito desktop non è una scelta, è una cazzata...

... ma probabilmente non avrei scritto questo post se non avessi visto l'ultimo template di Gavick che offre SOLO il menu a sandwich, peraltro in basso a sinistra e non in alto a destra e se il loro penultimo template non lo avesse messo al centro di una sottile colonna a sinistra, rappresentandolo con tre puntini verticali che poi si animano e diventano tre righe.

 

writer intro

writer menu

 

Santoddio, non vorrei scaldarmi ma dico io, le tre righe sono già poco e me le sostituisci con tre puntini? E nella tua demo mi metti un bell'overlay con una freccia che spiega dove si trova il menu? Ma cosa dobbiamo fare, i siti con le istruzioni per l'uso?

E il prossimo menu come sarà raffigurato, magari da un punto solo?

Ma i ragazzi di Gavick sono pazzerelli, si sa. Gli piace fare cose innovative e a volte ci prendono e a volte no, ma quando il trip di fare un menu nascosto viene ad un tedesco (e non ad un polacco) comincio a preoccuparmi. Specie se la casa in questione è Yootheme che mi propina con peak un sito banale con un menu invisibile.

 

peak

 

L'idea di fondo era bella, io l'avevo progettata su carta quando avevo visto il loro showroom. Immaginavo che il menu (visibile e verticale in colonna sinistra) aprisse un'intera colonna di tonalità più chiara in cui c'era la sottovoce e nel caso di ulteriori sottovoci continuasse in questa direzione.

Sempre dal Warp di Yootheme, invece, può venire una buona idea. L'area offcanvas è utile e dal momento che si può aprire e richiamare con una azione sarebbe bello utilizzarla in qualche modo (che non sia il menu, ovviamente).

Il menu a sandwich nel sito desktop NO.
Qui, se vuoi lavorare sull'elemento che più contribuisce alla navigazione del tuo sito, c'e' un bel post su come dovrebbe essere un menu efficace.

Non sei ancora convinto? Leggi TechCrunch

 

3. Fullwidth e fasce orizzontali VS foglio appoggiato sullo sfondo

Un annetto fa ha iniziato ad andare di moda il parallasse, un effetto per cui l'immagine di sfondo scorre più lentamente dello schermo, creando un effetto tridimensionale (quando l'effetto è creato bene).

Il problema di questo effetto, sostanzialmente, è che per farlo funzionare dovevi mettere foto molto grandi di sfondo ma - come sappiamo - Una foto decentemente compressa che sia adatta ad uno schermo da 1600px di width (e il mio imac è 2560) ha un certo peso. Quello su cui volevo attirare l'attenzione non è però un problema di performance, ma di usabilità.

Se una immagine di sfondo in fullwidth ci può stare quello che disturba violentemente la lettura della pagina sono i moduli e le informazioni da leggere (e non semplicemente vedere) in fullwidth.

Mi riferisco a quei moduli che, in un template da 1100px di width, occupano tutto lo schermo in larghezza, come farebbe una foto, definendo una interruzione nel layout di pagina. Se moduli di colori diverso possono essere utili in un template in cui la linea di continuità è data dallo sfondo, in un template come Nuevo ogni sezione viene percepita come un blocco a parte e secondo la mia opinione si perde in continuità, complice anche il padding veramente abbondante dei moduli.

 

nuevo

 

Le persone hanno bisogno di riferimenti, di schemi coerenti. Un testo bandierato a sinistra si legge meglio di un giustificato e molto meglio di un centrato. L'asta della bandiera è un toccasana per il lettore, online ed offline ed elementi volanti non aiutano a gestire l'attenzione dell'utente.

Una divisione come quella di Nuevo (e in generale quelle del T3) secondo me non funziona, mi continua a dare degli stop che limitano la mia fluidità cognitiva e mi continuano a far chiedere se andare avanti o andare via, se c'e' altro oppure ho finito.

A volte sono gallerie, a volte no, ma sono una croce per chi naviga al punto di essere - per me - quasi un elemento bloccante. Sono fastidiose perché la vista segue uno schema e ad un certo punto si trova una fascia di informazioni che gli arriva diretta in faccia un pò come in quei video in cui vedi la macchina che scompare lentamente dietro gli alberi e poi salta fuori il mostro che ti spaventa.

Per rendere bene l'idea ho evidenziato l'area dei contenuti di Kitana sfuocando quello che dovrebbe essere sfondo. Circa a metà pagina troviamo un blocco di informazioni completamente fuori linea con gli altri che mi costringe a bloccarmi e a cambiare il 'verso di lettura', perdendo continuità (peraltro questo mosaico non viene neanche creato in automatico ma con codice, cosa che mi aveva già dato fastidio in quanto poi non è usabile dagli utenti finali).

 

katana

 

Il nostro non è un gioco dove vince chi è più originale (non vogliatemene voi di awwwards) e il design deve essere funzionale all'utente (almeno se il vostro obiettivo sono le conversioni).

 

4. One page VS landing page

Se quest'anno è stato l'anno del content marketing credo che il prossimo anno sarà quello della conversion rate optimization.

Tutti vogliono essere primi su Google ma nessuno si preoccupa di quello che gli utenti fanno quando atterrano sul sito. Landing page e Cro dovrebbero essere parole che sentirete spesso e per questo ritengo importante segnalare quella che - se non è un vero e proprio cannibale di conversioni - può portarvi fuori strada senza che ve ne rendiate conto.

Cos'é una landing page?

Una landing page è un sito monopagina ottimizzato per conseguire un obiettivo specifico, detto conversione.

 

 

 

Ma se una Landingpage è un sito monopagina non è detto che un sito monopagina sia una landingpage. Si, anche se nella descrizione o nel nome del template che state acquistando è inclusa la parola Land, non fatevi fregare :D

La descrizione di Nuevo è: JA Nuevo is modern design template with lot of whitespace and simplicity. It helps enhance the performance of a landing page, improve readability and make a bold first impression

Ma questo template non ha nulla a che fare con una landing page, può anzi essere visto come un ottimo template istituzionale per app (a parte le fasce di cui abbiamo già parlato).

Personalmente realizzo landing page con moltissimi template che però non sono venduti come specifici per questo tipo di pagine ma vengono adattati a seconda delle esigenze del cliente. Il menu punta ad ancore nella pagina, le pagine superflue vengono eliminate e, se necessario, viene mantenuto solo il blog a cui però viene data un'importanza molto marginale, sopratutto nella navigazione.

Che un cliente non sappia come sia fatta una landing non mi stupisce ma ho visto concorrenti che mettevano a portfolio siti ONEPAGE vendendoli come landing. Ricordate sempre che il componente principale in una pagina che funziona è l'ordine e la qualità delle informazioni che pubblicate, non il design o il fatto che c'e' uno smoothscroll.

E' un pò come un bravo venditore... lo valuti in base a quello che ti dice, non a come è vestito (sebbene un bel completo abbia una sua utilità funzionale alla vendita).

State attenti a quello che un tema professionale vi promette e guardatelo come guardereste una confezione di Lego. Andate oltre al progetto finito e pensate a quello potrete creare con quei pezzi.

 

5. Popup like e exit popup VS lasciamivivere

Le avevo notate appena uscite e ci avevo scritto un post, dopo averle provate su www.preventivo-sito-web.com.

Ora è passato un pò di tempo e la tecnologia è diventata abbastanza comune, tanto da cominciare ad essere fastidiosa come ogni buona pratica che viene estromessa dal contesto e dagli obiettivi per cui è stata creata.

Praticamente ogni sito web di settore ben strutturato ha la sua bella popup che ti blocca l'uscita e i peggiori hanno anche una bella popup che ti aspetta per chiederti il like ancora prima di vedere la notizia. Ne avevo già parlato qui, è roba vecchia, se ancora usate queste tecniche è ora di smetterla, gli utenti sono stufi.



socialnetwork-donts



Spero che questo post vi sia piaciuto, non credo di aver dimenticato nulla
ma se così fosse vi aspetto nei commenti! :)


 

Questo sito utilizza cookie.

Navigando, l'utente accetta. Per saperne di piu'

Approvo

Hai apprezzato i miei contenuti gratis?
Immagina cosa troverai in un libro vero!

OffertaInvincibile

Prossima pubblicazione in libreria
Landing Page Efficace

Conquista il tuo mercato con un'offerta invincibile!

check Ottieni consigli pratici per creare un pagina web che vende
check Scopri le priorità nella tua strategia di webmarketing
check Impara tecniche di scrittura che sfruttano la psicologia cognitiva
check Apprendi come ottenere la fiducia di chi legge la tua offerta

SCARICA L'ESTRATTO GRATIS... oltre 30 pagine!

Consigli Web Comunicare bene e ottenere risultati

Prev Next

Il corso di Marketing e comunicazione che ti renderà invincibile

Ti piacerebbe... Attrarre in modo naturale gli utenti sul tuo sito web e gestire al meglio la loro attenzione incollandoli allo...

Corso Landing Page Efficace - Video gratis sul metodo OggiVinciTu

Il primo webinar gratis che spiega la strategia dietro al metodo OggiVinciTu e il nostro modo di implementare Landing Page...

Landing Page
 ... tutto quello che devi sapere per vendere online

Se cerchi in rete e fai questa domanda ad un consulente, probabilmente la risposta che otterrai è che una landing...

Esempi Landing Page: modelli e differenze tra Squeeze e Sales

Quanti tipi di landing page esistono? Potremmo dire che ci sono infiniti tipi di landing page. Qualsiasi pagina di destinazione, di...

Landing page: il metodo Oggi Vinci Tu

Come costruire un’Offerta Invincibile con il metodo Oggi Vinci Tu Come abbiamo detto per vendere dobbiamo far capire ai nostri utenti...

Landing page: quali strumenti utilizzare per la parte tecnica?

Ho scritto un intero libro di oltre 280 pagine parlando solo di strategia e dei passi necessari per costruire una...

Checklist - 37 errori da controllare prima di pubblicare il sito

La Checklist fondamentale per evitare di perdere contatti! Fai tanta fatica per essere visibile e portare utenti sul tuo sito, ma...

Come Ottenere più contatti dal sito web

Una nuova guida, gratis per te Fai tanta fatica per essere visibile e portare utenti sul tuo sito, ma cosa succede...

Vendite online Vs Cookie law - Garante e UE hanno ragione. Ecco perché.

Se non fossimo nel 2015 ma nel 2000 probabilmente in questo momento mi starebbero cazziando. Le mie braccia sarebbero lungo...

Lead Generation spiegata semplice. Trovare clienti in rete è come cucinare.

  Come si vende online, la vera guida utile alle aziende. Mi capita spesso di dover spiegare quello che faccio durante cene...

Social Media Marketing, Indignazione, Passaparola e Stefano Accorsi nel 2015

Chi mi conosce sa che lavoro nel web ma ho una passione spiccata per i meccanismi che regolano la comunicazione...

UX monsters 2015

Trappole e mostri che ti faranno perdere risultati nel 2015. Usi template professionali come base per il tuoi siti web in...

FuturaImmagine SL - CIF ESB76136159 - Calle La Gomera 1, apt28a - 35660 La Oliva (Las Palmas) ES
N. Verde 800 685575 - 
Whatsapp 329.4534340 - info@futuraimmagine.com - Skype: Luca.futura - Privacy Policy



/*