Come fare la conversione focalizzata sul Web Design: una guida completa

Ecco come fare il web design focalizzato sulla conversione in un solo respiro: decidere l’azione più importante che ogni pagina esiste per supportare, quindi progettare tutto – gerarchia, tipografia, colore, immagini, forme – per rendere quell’azione ovvia, facile e affidabile per il visitatore. Il design focalizzato sulla conversione non riguarda trucchi o pulsanti più forti. Si tratta di chiarezza: uno sconosciuto che atterra sulla tua pagina dovrebbe essere in grado di dire cosa offri, a chi serve e cosa fare dopo entro circa cinque secondi. Se non possono, nessuna quantità di smalto ti salverà.

Ok, siamo onesti per un secondo. La maggior parte dei siti web non sono progettati per i visitatori. Sono progettati per le persone che li hanno costruiti – il fondatore che voleva la sua tagline preferita sopra il fold, il comitato che ha insistito su sei banner di dimensioni uguali, il designer che si è innamorato di una splendida animazione che seppellisce il link dei prezzi. Ho visto così tanti team intelligenti riversarsi mesi in un sito che sembra sbalorditivo in un portafoglio e confonde tranquillamente ogni vero essere umano che atterra su di esso. La buona notizia? Imparare a fare web design con conversione focalizzata è principalmente disimparare l’abitudine di progettare per te stesso. Lascia che ti guidi attraverso l’intero sistema, come vorrei che qualcuno mi avesse guidato anni fa.

Cosa significa in realtà il web design focalizzato sulla conversione?

Il web design focalizzato sulla conversione è la pratica di progettare pagine intorno all’obiettivo del visitatore piuttosto che all’ego dell’azienda. Ogni elemento – il titolo, l’immagine dell’eroe, la navigazione, il colore del pulsante, la lunghezza del modulo – viene valutato con una domanda: aiuta il visitatore a capire, fidarsi e agire? Se un elemento non orienta, persuade, rassicura o guida, è decorazione nel migliore dei casi e attrito nel peggiore dei casi.

Ecco la parte che nessuno ti dice: il design di conversione e il buon design sono la stessa cosa. Una pagina che converte bene è quasi sempre una pagina chiara, veloce, leggibile e rispettosa del tempo e dell’attenzione del visitatore. Lo stereotipo del design di conversione come imbroglioni pulsanti rossi e timer conto alla rovescia è una caricatura – e onestamente, un dannoso, perché dà ai team il permesso di respingere completamente la disciplina. Il design focalizzato sulla conversione reale è più silenzioso di così. Sta scegliendo la chiarezza piuttosto che l’astuzia, ogni volta che i due conflitti.

E saranno in conflitto. Il tuo titolo di gioco intelligente contro una semplice dichiarazione di ciò che fai. La tua immagine artistica astratta dell’eroe rispetto a uno screenshot del prodotto reale. La tua elegante navigazione nascosta rispetto a noiosi link visibili. Quando la chiarezza e l’intelligenza combattono, la chiarezza dovrebbe vincere. Cleverness è per i luoghi dove non costa nulla – la tua pagina 404, la tua microcopia, le tue e-mail di conferma. Non la tua proposta di valore.

Il test di cinque secondi: la tua stella nord

La diagnostica più semplice in tutto il design di conversione: mostra la tua pagina a qualcuno che non l’ha mai vista per cinque secondi, portala via e fai tre domande. Che cosa offre questa azienda? Per chi? Cosa dovevi fare dopo? Se non riescono a rispondere a tutti e tre, la pagina ha un problema di chiarezza e i problemi di chiarezza si trovano a monte di ogni altra ottimizzazione. Non ha senso perfezionare il colore del pulsante se i visitatori non sanno cosa li ottiene il pulsante.

Troverai uno script completo per eseguire questo test verso la fine di questa guida, perché voglio che tu lo faccia davvero – non solo annuire.

Come si costruisce una gerarchia visiva che guida l’occhio?

La gerarchia visiva è l’ordine in cui l’occhio di un visitatore viaggia attraverso la tua pagina, ed è l’abilità meccanica principale in come eseguire il web design focalizzato sulla conversione. Controlla la gerarchia con quattro leve:

• Dimensione. Gli elementi più grandi vengono visti per primi. Il tuo messaggio più importante dovrebbe essere il tuo testo più grande.
• Contrasto. Alto contrasto contro lo sfondo attira l’attenzione; basso contrasto si ritira. Il pulsante principale dovrebbe avere il contrasto più forte sulla pagina.
• Posizione. In alto a sinistra a destra (in lingue da sinistra a destra), con la parte superiore della pagina che trasporta il maggior peso. Le cose importanti vanno dove gli occhi atterrano naturalmente.
• Whitespace. Lo spazio vuoto non è spazio sprecato – è un riflettore. Un elemento circondato da una stanza di respirazione viene notato; un elemento stipato tra gli altri dodici viene scremato.

La disciplina che fa funzionare la gerarchia è questa: un’azione primaria per pagina. Non tre. Non “beh, abbiamo due pubblici principali, quindi abbiamo bisogno di due pulsanti uguali”. Uno. Puoi assolutamente offrire azioni secondarie – un pulsante fantasma, un link di testo, un percorso più tranquillo per le persone che non sono pronte – ma non ci dovrebbe mai essere un momento in cui un visitatore guarda la tua pagina e sinceramente non può dire quale azione vuoi che compiano. Quando tutto è sottolineato, nulla lo è. Una pagina con cinque inviti all’azione concorrenti non offre ai visitatori opzioni; sta dando loro una tassa decisionale e la maggior parte delle persone paga le tasse decisionali lasciando.

Un rapido autocontrollo che amo: strabismo alla tua pagina fino a quando il testo non si sfoca. Cosa c’è ancora? Qualunque cosa sopravviva allo strabismo è ciò che la vostra gerarchia sta effettivamente promuovendo. Se si tratta di una grafica decorativa invece del titolo e del pulsante principale, devi lavorare.

Qual è il vero lavoro della zona sopra la piega?

C’è un vecchio mito secondo cui tutto ciò che è importante deve essere stipato sopra la piega perché nessuno scorre. La gente scorre. Scorre costantemente – sui telefoni, lo scorrimento è il comportamento predefinito, non un’eccezione. Quello che la gente non farà è scorrere una pagina che non l’ha guadagnata.

Quindi il compito della tua area sopra la piega non è quello di contenere tutto. E’ per oriente: Dite al visitatore dove si trova, confermate che è nel posto giusto e fategli desiderare di andare avanti. Ciò di solito significa un titolo chiaro che indica ciò che offri e per chi, una linea di supporto che aggiunge specificità, una chiamata all’azione primaria per la minoranza pronta ora e un pezzo di evidenza visiva. — uno screenshot del prodotto, una foto reale, qualcosa che mostra piuttosto che raccontare. Tutto qui. Resistete alla tentazione di impilare una giostra, tre puntelli di valore, un video e una barra di annuncio nella prima finestra. Un’area sopra la testa che cerca di dire tutto non dice nulla.

Pensalo come l’ingresso di un negozio ben progettato. L’ingresso non contiene l’intero inventario. Ti dice che tipo di negozio è questo e ti invita più in profondità all’interno.

Come funzionano i segnali direzionali – e quando attraversano una linea?

L’attenzione umana segue i segnali. Guardiamo dove altre persone nelle foto stanno guardando. Seguiamo frecce, linee e la direzione di un’immagine del prodotto “punti”. Usati onestamente, i segnali direzionali sono uno strumento adorabile: una sottile freccia che guida l’occhio dal titolo alla forma, una foto di una persona orientata verso la tua chiamata all’azione, un layout il cui flusso di lettura naturale termina al pulsante.

Usati in modo disonesto, i segnali diventano manipolazione – ed è qui che voglio essere davvero diretto con te. Il design focalizzato sulla conversione ha un piano etico e queste cose sono al di sotto di esso:

• Pulsanti falsi e annunci mascherati — elementi in stile per assomigliare alla tua interfaccia che in realtà portano da qualche altra parte.
• Incremento fuorviante — rendendo l’opzione “accetta tutto” enorme e l’opzione di declino un sussurro grigio pallido.
• Opt-out per il viaggio di colpa – la scuola di microcopia “No grazie, odio risparmiare denaro”.
• Costi nascosti e scatole pre-controllate subdole – tutto ciò che il visitatore scopre con una sensazione di affondamento in seguito.

Questi modelli possono produrre clic a breve termine, che è esattamente il motivo per cui sono allettanti. Ma convertono le persone che non volevano convertirsi, e quelle persone rimborsano, sfornano, si lamentano e ricordano. Il design che rispetta il visitatore converte le persone giuste – quelle che rimangono. Se una tattica funziona solo quando il visitatore non se ne accorge, non spedirla.

Perché la tipografia è uno strumento di conversione?

Nessuno si converte su una pagina che ha abbandonato. La tipografia è il meccanismo di consegna di ogni parola persuasiva che hai scritto, ed è spesso scioccante la cosa che sabota una pagina altrimenti buona. I fondamenti:

• Dimensione del testo del corpo: comodamente grande – 16px è un pavimento ragionevole per la copia del corpo, e più grande è spesso meglio. Un testo minuscolo dice: “Questo non è davvero destinato a essere letto”.
• Lunghezza della linea: circa 50 – 75 caratteri per linea. I paragrafi a larghezza intera su un monitor desktop costringono l’occhio a un viaggio estenuante verso il margine sinistro.
• Altezza della linea: circa 1,5 per la copia del corpo, in modo che le linee non collidano visivamente.
• Contrasto: testo scuro su sfondi chiari (o veramente chiaro su veramente scuro). Quel testo alla moda del corpo grigio chiaro su bianco? Sta filtrando silenziosamente tutti coloro i cui occhi sono più vecchi di 25 o il cui schermo è alla luce del sole.

Accessibilità è conversione – non una casella di controllo di conformità

Voglio stare seduta con questo, perché riformula tutto. Ogni visitatore che il tuo design esclude è una conversione che hai perso. Qualcuno che non riesce a leggere il testo a basso contrasto, non può accedere al modulo con una tastiera, non può dire cosa fa il pulsante dell’icona non etichettato o non riesce a capire il contenuto solo immagine con un lettore di schermo – non “rimbalzare”. Hai chiuso la porta su di loro.

Progettare gli standard di accessibilità è sia la cosa giusta da fare che la cosa intelligente da fare, ed è raro che una mossa sia così pulita:

• Contrasto: obiettivo per i rapporti di contrasto a livello WCAG tra testo e sfondo – il tuo normale testo del corpo dovrebbe essere chiaramente leggibile, non esteticamente debole.
• Focus stati: ogni elemento interattivo dovrebbe mostrare un contorno visibile quando raggiunto dalla tastiera. Rimozione contorni di messa a fuoco perché “sembrano disordinato” gli utenti di tastiera completamente.
• Testo alternativo: le immagini significative ricevono descrizioni; quelle decorative ottengono attributi alt vuoti, quindi i lettori di schermo li saltano. Se la tua immagine eroe porta la tua proposta di valore, un visitatore cieco dovrebbe comunque riceverla.
• Navigazione tastiera: tutto cliccabile dovrebbe essere raggiungibile e operabile senza mouse — inclusi i menu, i modali e quel menu a discesa personalizzato creato dallo sviluppatore da div.
• Non fare affidamento solo sul colore: se un errore viene comunicato solo da un campo che diventa rosso, i visitatori daltonici rimangono a indovinare. Abbina il colore con testo e icone.

Le pagine accessibili tendono anche ad essere pagine più chiare per tutti: migliore contrasto, etichette migliori, migliore struttura. E’ uno dei pochi pranzi gratuiti nel design.

Come usare il colore e far risaltare i CTA?

La gente ama discutere su quale colore del pulsante converte meglio, e la risposta onesta è: il colore “migliore” è quello con il maggior contrasto rispetto all’ambiente circostante su il tuo pagina. Un pulsante verde su un sito a tema verde scompare; lo stesso verde su un sito viola si apre. Il contrasto con il contesto batte qualsiasi regola universale del colore.

Un sistema semplice e robusto per il colore:

• Scegli un colore accento e riservarla quasi esclusivamente per azioni primarie. Se il colore dell’accento viene visualizzato su pulsanti, link, icone, badge e swooshe decorativi, si ferma il significato “agisci qui”.
• Mantieni la maggior parte della pagina calma e neutra L’accento ha qualcosa contro cui fare contrasto. La moderazione è ciò che rende possibile l’enfasi.
• Dare il pulsante CTA dimensioni, spazio bianco e un’etichetta specifica per l’azione. “Ottieni il mio piano gratuito” supera “Invia” non a causa di parole magiche, ma perché dice al visitatore esattamente cosa offre il clic. I pulsanti di etichetta con il risultato, non il meccanismo.
• Controlla anche il contrasto del testo del pulsante: un pulsante vibrante con testo a basso contrasto è un bel rettangolo che nessuno può leggere.

Quali immagini aiutano effettivamente una pagina a convertire?

L’immagine porta significato o porta peso – non c’è neutro. Un’immagine che mostra il tuo prodotto reale, i tuoi risultati effettivi o gli umani reali dietro la tua attività crea comprensione e fiducia. Un’immagine che esiste per riempire lo spazio – la foto generica di stock di persone incredibilmente allegre che puntano su un laptop – aggiunge peso alla pagina, spinge verso il basso il contenuto reale e segnala “template” ai visitatori che hanno visto quella stretta di mano esattamente sorridente mille volte.

Linee guida su cui vorrei postare una pagina:

• Mostra il prodotto. screenshot reali, interfacce reali, packaging reali. Per il software in particolare, uno screenshot nitido risponde “cosa otterrò effettivamente?” più velocemente di qualsiasi paragrafo.
• Mostrare persone reali – onestamente. Le foto del tuo team e dei tuoi clienti reali (con il permesso) creano una vera fiducia. Quello che non devi mai fare è passare modelli azionari come il tuo team o inventare foto dei clienti. Se un visitatore scopre che “Sarah from Customer Success” è una foto stock, non si perde solo quella fiducia – si avvelena retroattivamente tutto il resto sulla pagina. Se non hai ancora foto reali, usa invece illustrazioni o immagini di prodotto. Onesti e generici battono falsi e “autentici”.
• Fai in modo che ogni immagine guadagni i suoi byte. Le immagini sono di solito le cose più pesanti di una pagina, e una pagina lenta sanguina i visitatori prima che il design abbia la possibilità di lavorare. (La velocità è il suo argomento profondo – la mia guida su come migliorare la velocità della pagina per le conversioni copre la compressione, il caricamento pigro e le correzioni che contano di più.)

Come si progettano le forme che le persone finiscono davvero?

Le forme sono dove l’interesse diventa azione, il che le rende il più alto interesse immobiliare sul tuo sito – e il luogo in cui le piccole decisioni di design si combinano più velocemente. Il principio guida: ogni campo è un pedaggio. Ognuno chiede al visitatore di fare un piccolo sforzo e di rinunciare a un po ‘di privacy. Caricare il pedaggio minimo di cui l’azienda ha veramente bisogno.

• Taglia i campi senza pietà. Per ogni campo, chiedi: abbiamo bisogno di questo adesso, o potremmo chiedere più tardi, dopo la fiducia esiste? “Bello avere per le vendite” non è “necessario ora”.
• Usa etichette chiare e visibili – sopra il campo, non il testo segnaposto che svanisce nel momento in cui qualcuno fa clic. Le etichette scomparse costringono le persone a ricordare ciò a cui stavano rispondendo.
• Convalida in linea, gentilmente. Parlare alle persone di un problema vicino al campo, non appena è conoscibile, nel linguaggio umano. “Hmm, quell’email sembra incompleta – il doppio controllo mentale?” tratta il visitatore come una persona. Un rosso “INVALID INPUT” nella parte superiore della pagina dopo aver colpito invia li tratta come un tentativo di accesso fallito.
• Spiega il perché. Chiedere un numero di telefono? Di’ a cosa serve. Domande personali inspiegabili fanno abbandonare le persone – e hanno ragione.
• Fai in modo che il pulsante di invio dica cosa succede. “Crea il mio account gratuito” stabilisce un’aspettativa; “Sottometti” stabilisce un mistero.
• Per le forme lunghe, rompere in passi con un indicatore di avanzamento e iniziare con le domande facili. Il momento è reale: qualcuno ha investito tre passi e le persone hanno finito.

Perché il mobile-first design è così importante per le conversioni?

Per la maggior parte dei siti, la maggior parte delle prime impressioni ora si verificano su un telefono – spesso tenuto in una mano, su una connessione lenta, da qualcuno a metà distrazione. Progettare desktop-first e “adattarsi” produce i classici disastri mobili: collegamenti microscopici, forme che richiedono zoom, menu che richiedono precisione del rubinetto a livello di chirurgo.

Mobile-first conversion design significa:

• Rispettare la zona del pollice. Su un telefono tenuto con una mano, il centro dello schermo è facile da raggiungere; gli angoli superiori sono un tratto. Metti le azioni primarie dove vivono i pollici.
• Tap dimensioni obiettivi generosamente – almeno intorno a 44 – 48px, con spaziatura reale tra bersagli adiacenti. Poche cose dicono “non abbiamo testato questo su un telefono” come fat-finger misfires.
• Semplifica, non restringerti. La pagina mobile non è la pagina desktop ridimensionata. È lo stesso lavoro svolto con priorità più strette: stack di titoli più brevi, singola colonna, meno scelte simultanee.
• Usa le tastiere giuste. I campi di posta elettronica dovrebbero richiamare la tastiera e-mail, i campi di numero il pad di numeri. È una piccola gentilezza che i visitatori sentono senza accorgersene.
• Mantenere gli elementi appiccicosi umili. Una barra CTA appiccicosa sottile può davvero aiutare; una pila di intestazioni appiccicose, banner di cookie e bolle di chat che divorano metà della vista fa veramente male.

Perché coerenza e familiarità battono la novità?

Ecco una verità che è leggermente straziante per i designer creativi: i visitatori non vogliono imparare la tua interfaccia. Passano la maggior parte della loro vita su altri siti web, e arrivano al vostro con aspettative profonde – logo in alto a sinistra va a casa, la navigazione vive in alto o dietro un’icona di menu riconoscibile, testo sottolineato o colorato è un link, l’icona del carrello mostra il carrello. Ogni convenzione che si rompe per il gusto di essere distintivo è una piccola tassa di comprensione su ogni singolo visitatore.

La Legge di Jakob è il nome formale per questo, ma non hai bisogno della citazione per sentirlo: sei atterrato su un sito d’avanguardia con navigazione di carne misteriosa e hai sentito quel tremolio di fastidio. I tuoi visitatori sentono lo stesso sfarfallio sul tuo. Sii distintivo nella tua voce, nelle tue immagini, nelle tue idee e noioso nella tua meccanica. La navigazione è assolutamente un luogo dove i battiti familiari sono intelligenti; Ho scritto un intero pezzo di accompagnamento su come ottimizzare la navigazione del sito per le conversioni se i menu sono dove i visitatori si perdono.

La coerenza è importante all’interno anche il tuo sito. Se i pulsanti primari sono viola e arrotondati su una pagina, dovrebbero essere viola e arrotondati ovunque. La coerenza interna consente ai visitatori di costruire un modello mentale una volta e riutilizzarlo — che è esattamente ciò che fa sentire un sito “facile” senza che nessuno sia in grado di dire il perché.

Come si riduce il carico cognitivo senza stordire le cose?

Ogni scelta che presenti, ogni elemento in competizione per l’attenzione, ogni schema sconosciuto che un visitatore deve decodificare – tutto attinge dallo stesso pool limitato di energia mentale. Quando la piscina si asciuga, le persone non prendono una decisione attenta. Fa il più facile: andarsene.

L’illustrazione classica è lo studio della marmellata: gli acquirenti hanno offerto una piccola selezione di marmellate che avevano molte più probabilità di acquistare effettivamente di quanto gli acquirenti abbiano offerto una diffusione enorme. Qualunque cosa pensiate della ricerca specifica, il modello sottostante si presenta ovunque nel design: più opzioni spesso significano meno decisioni. Modi pratici per alleggerire il carico:

• Ridurre le scelte simultanee. Tre livelli di prezzo, non sette. Un piano consigliato, visivamente marcato. Un’azione primaria per schermo.
• Utilizzare la divulgazione progressiva. Mostra ciò di cui la maggior parte delle persone ha bisogno ora; rimuovi i dettagli dietro “Impara di più”, le fisarmoniche o i passaggi successivi. Le impostazioni avanzate esistono – non hanno bisogno di salutare tutti alla porta.
• Butta tutto. Paragrafi brevi, sottovoci scansionabili, elenchi puntati, tabelle per confronti. Le persone scansionano prima e leggono secondo; design per la scansione.
• Uccidi l’ornamentale. Autogiocando caroselli, parallasse fiorisce, e sfondi animati tutti sussurrano “guardami” mentre il tuo messaggio cerca di parlare. La mossa dovrebbe significare qualcosa o essere andata.

Il design può rendere le persone sicure di te?

Sì, entro limiti che valga la pena di essere onesti. I visitatori giudicano rapidamente la credibilità e, prima di aver letto una parola, il design è tutto ciò che hanno. Una pagina lucida, coerente e veloce segnala “operazioni reali, persone attente”. Typo, immagini rotte, stili contrastanti e layout 2009-era rischio di segnale – abbastanza o meno, i visitatori trattano il design sciatto come un proxy per tutto sciatto.

Quindi il lavoro di base è semplicemente artigianale: elementi allineati, spaziatura coerente, collegamenti di lavoro, tipografia professionale, un sito che si carica rapidamente e sembra intenzionale. Quindi strato nella sostanza:

• Specifiche reali – nomi di clienti e parole reali (con autorizzazione), numeri reali in cui li hai veramente, descrizioni concrete invece di “soluzioni di livello mondiale”.
• Trasparenza – prezzo reperibile, un reale sulla pagina, informazioni di contatto chiare, politiche chiaramente dichiarate. Nascondere queste letture come avere qualcosa da nascondere.
• Riassicurazione al momento del dubbio – mettere “nessuna carta di credito richiesta” accanto al pulsante di iscrizione, la politica di rimborso vicino al pulsante di acquisto. Rispondere all’ansia in cui si verifica, non a tre pagine di distanza.

Ma ecco il limite: la lucidatura può solo amplificare la verità, non sostituirla mai. Una pagina splendida avvolta in un’offerta vaga o disonesta converte peggio nel tempo di una pagina normale avvolta in una veramente buona – e “nel tempo” è l’unico periodo di tempo in cui una vera azienda vive. Il design ha il primo sguardo. I contenuti onesti guadagnano il clic.

Qual è il lavoro di ogni tipo di pagina in un sito focalizzato sulla conversione?

Un errore di progettazione sorprendentemente comune è trattare ogni pagina come una brochure per uso generale. Ogni modello ha un lavoro e progettare per quel lavoro è metà della battaglia:

Tipo di pagina	Il suo unico lavoro	Priorità di progettazione
Homepage	Orientare e indirizzare i visitatori sulla strada giusta	Chiarezza immediata su cosa / chi / perché, quindi chiari percorsi per pubblico o necessità
Pagina di atterraggio	Converti su un’unica offerta	Un messaggio abbinato alla fonte di traffico, un CTA, minimo o nessun tipo di navigazione
Pagina prodotto/servizio	Costruire il desiderio e risolvere i dubbi	Vantaggi più specifiche oneste, immagini reali, obiezioni risposte vicino al CTA
Pagina dei prezzi	Consentire una decisione sicura	Semplice confronto, un’opzione consigliata, tariffe e termini visibili, FAQ adiacenti
Blog/pagina contenuti	Guadagna fiducia e invita un passo successivo	Tipografia leggibile soprattutto, un CTA pertinente e discreto

Notate come le priorità di progettazione differiscono. La navigazione a strisce ha senso su una pagina di destinazione focalizzata e sarebbe ostile su una home page. Una vendita dura appartiene vicino a una tabella dei prezzi e si sente grossolano a metà articolo. “Qual è l’unico lavoro di questa pagina?” dovrebbe essere la prima domanda in ogni revisione del design – che ci porta alla disciplina.

Come si cambia il design senza volare alla cieca?

Tutto ciò che abbiamo detto sopra ti dice come appare il bene. Questa sezione riguarda come arrivare da qui – perché il processo è dove la maggior parte delle squadre si sabotano.

Ricerca prima della riprogettazione. Le più grandi vittorie di progettazione provengono dalla risoluzione dei problemi che i visitatori hanno effettivamente, non problemi che il team immagina in una sala conferenze. Prima di spostare un singolo pixel, raccogliere prove: guardare le registrazioni delle sessioni, leggere le risposte dei sondaggi, studiare dove le persone abbandonano il tuo imbuto, eseguire test di cinque secondi. La mia guida fondamentale su come fare la ricerca di conversione passa attraverso il toolkit completo – è davvero la prima cosa da leggere prima di qualsiasi lavoro di progettazione serio, perché la ricerca ti dice quali dei principi di questo articolo il tuo sito sta violando e quali non lo è.

Prova grandi cambiamenti e cambia una cosa alla volta. Se hai abbastanza traffico, A / B testa cambiamenti di design significativi piuttosto che fidarsi dei tuoi gusti (a volte il gusto di tutti è sbagliato, incluso il mio). E resistere alla grande rivelazione. Il lancio di redesign-everything-a-una volta è l’errore più seducente in questo campo: se le conversioni salgono, non sai quale cambiamento ha fatto. Se vanno giù, non sai quale cambiamento incolpare. In ogni caso, hai speso il tuo budget più grande per imparare nulla. Cambiamenti sequenziali e misurati costruiscono conoscenze di compounding; le riprogettazioni big-bang lo reimpostano a zero.

Aspettatevi qualche perdita. I professionisti onesti ti diranno che molti cambiamenti di design non superano l’originale, e va bene – ogni test ti insegna qualcosa sul tuo pubblico che nessun articolo di best practice (incluso questo) potrebbe. Posso promettere che il metodo funziona; nessuno può onestamente promettere qualsiasi risultato specifico da qualsiasi cambiamento specifico. Esegui il processo, mantieni le vincite, impara dalle perdite.

La tua checklist di revisione del design e lo script di test di cinque secondi

Ecco la parte che puoi fare questa settimana. In primo luogo, la lista di controllo – cammina la tua pagina a traffico più elevato e rispondi onestamente:

• Chiarezza: Uno sconosciuto sa cosa offriamo, per chi e cosa fare dopo in cinque secondi?
• Gerarchia: Esiste esattamente un’azione primaria visivamente dominante? La superficie di prova dello strabismo è gli elementi giusti?
• Sopra la piega: Il primo viewport orienta e invita — o cram e travolgere?
• Tipografia: il testo del corpo è almeno 16px, linee da 50 a 75 caratteri, abbastanza forte da leggere alla luce del sole?
• Accessibilità: stati di messa a fuoco visibili? Testo alternativo significativo? Completamente navigabile dalla tastiera? Niente di solo colore?
• Onestà: zero pulsanti falsi, annunci mascherati, opt-out per il viaggio di colpa, scatole pre-controllate o costi nascosti?
• Immagini: ogni immagine ha un significato? Ogni foto di persone è onesta su chi sono?
• Forme: Ogni campo è davvero necessario ora? Etichette visibili? Convalida in linea? Pulsante di invio con etichetta dei risultati?
• Telefono: Le azioni primarie nella zona del pollice? Toccare obiettivi 44px+? Tastiere corrette? Elementi appiccicosi contenuti?
• Coerenza: i pulsanti, i link e i modelli si comportano in modo identico in tutto il sito? Ci sono convenzioni infrante senza una ragione forte?
• Carico: qualsiasi elemento può essere rimosso senza perdere significato? (Se sì – rimuoverlo.)
• Fiducia: prezzi reperibili? Contatti info reali? La rassicurazione posta nei momenti esatti del dubbio?

E il copione di prova di cinque secondi. Recluta da tre a cinque persone che non hanno mai visto la pagina: amici degli amici, un pannello di test online, chiunque al di fuori della tua bolla:

1. Impostazione: “Ti mostrerò una pagina web per cinque secondi. Basta guardarlo in modo naturale: non c’è una risposta sbagliata e stai testando la pagina, non il contrario.
2. Mostra la pagina per cinque secondi (uno screenshot funziona bene), quindi nascondilo.
3. Chiedi, in ordine: “Che cosa offre questa azienda?” … “A chi pensi che serva?” … “Cosa avresti dovuto fare in quella pagina?” … “Cosa ricordi di più?”
4. Registra le risposte alla lettera. Non correggere, spiegare o difendere – nel momento in cui dici “beh, in realtà è per…”, il test è finito.
5. Punteggio: se la maggior parte dei partecipanti perde una delle prime tre domande, hai trovato il tuo divario di chiarezza. Risolvere prima la più grande mancanza, quindi ripetere il test con occhi freschi.

Cinque persone e trenta minuti ti insegneranno di più sulla tua pagina che un mese di dibattito interno. Prometto che questo diventa più facile – e onestamente, un po ‘di dipendenza.

Una nota onesta su questo: SocialBlaze è uno strumento di gestione dei social media organico – pianifica, pubblica e misura i tuoi contenuti sociali. Non sarà progettare il tuo sito web per voi. Ma il traffico che la tua presenza sociale invia è esattamente il traffico che le tue pagine appena concentrate sulla conversione stanno aspettando e le due discipline si compongono magnificamente: post migliori portano più visitatori, un design migliore converte più di loro.

Domande frequenti

Che cos’è il web design focalizzato sulla conversione in termini semplici?

È progettare ogni pagina intorno all’obiettivo del visitatore: un’azione primaria chiara, una gerarchia visiva che guida l’occhio ad esso, una tipografia accessibile leggibile, immagini oneste e attrito minimo. Il test è se uno sconosciuto può dire quello che offri, a chi serve e cosa fare dopo entro circa cinque secondi.

L’accessibilità influisce davvero sui tassi di conversione?

Sì, direttamente: ogni visitatore che non riesce a leggere il testo a basso contrasto, navigare per tastiera o capire i pulsanti non etichettati è una conversione che hai perso prima che iniziasse la persuasione. Il design accessibile – forte contrasto, stati di messa a fuoco visibili, testo alternativo, supporto per tastiera – amplia il pool di persone che possono effettivamente completare i tuoi flussi e tende a rendere le pagine più chiare anche per tutti gli altri.

Devo ridisegnare tutto il mio sito web in una volta sola?

Quasi mai. Una riprogettazione big-bang cambia tutto contemporaneamente, quindi se i risultati salgono o scendono, non puoi dire quale cambiamento l’ha causato – spendiamo il tuo budget più grande per imparare nulla. Cambia una cosa significativa alla volta, misura, mantieni ciò che funziona e lascia che la conoscenza si componga.

Qual è il colore migliore per un pulsante call-to-action?

Non c’è un colore universalmente migliore – ciò che conta è il contrasto con l’ambiente circostante sulla tua pagina specifica, abbinato a moderazione ovunque, quindi l’accento si distingue davvero. Riserva un colore dell’accento quasi esclusivamente per le azioni primarie, assicurati che il testo dell’etichetta del pulsante sia altamente leggibile ed etichettalo con il risultato di fare clic piuttosto che un generico “Invia”.

Quanti campi deve avere una forma di iscrizione o di lead?

Pochi come l’azienda ha veramente bisogno in questo momento – trattare ogni campo come un pedaggio che il visitatore paga in sforzo e privacy. Chiedi solo cosa è necessario per fornire il valore immediato, raccogliere i dettagli piacevoli da avere in seguito una volta che esiste la fiducia e supportare i campi che mantieni con etichette visibili, una validazione in linea gentile e una chiara spiegazione per qualsiasi cosa personale.