5 consigli per progettare un pulsante Acquista vincente

Se sei un designer, o un marketer online, o ti capita di possedere un sito web in cui provi a vendere qualcosa, a un certo punto dovrai progettare un vero e proprio "pulsante di acquisto". E poi, scoprirai subito che basta mettere un “acquista ora” il testo su un rettangolo blu non è sufficiente se speri di ottenere buoni risultati.

Fortunatamente, progettare un vero e proprio "pulsante di acquisto" non è così difficile una volta acquisita conoscenza di base. Ecco qui.

Prima di tutto, il il testo sul tuo pulsante è la cosa più importante, ma ci sono alcune altre caratteristiche che devono essere affrontate. Perché dico che il testo è il più importante? Immagina questo: qual è il punto di avere un pulsante ben progettato se il testo su di esso dice “Vai all'inferno!”? Caso chiuso. Una buona copia è dove sono fatti i soldi.

Nell'articolo di oggi, discutiamo 5 tratti cruciali di un adeguato "pulsante di acquisto". Diamo un'occhiata!

1. Stile generale

Questo è il punto n. 1 su questo elenco, non senza una ragione, poiché è il tratto più importante.

Tu vuoi trasforma il tuo pulsante in una mucca viola. Questo è un concetto reso popolare da Seth Godin. In breve, vuoi che sia notevole; per notevole intendo qualcosa che non può essere trascurato. Qualcosa come una mucca viola nel bel mezzo di un pascolo.

Alcuni designer non sono particolarmente bravi in ​​questo. Si è tentati di creare un pulsante che si leghi magnificamente con i colori e lo stile del sito Web su cui si trova. All'inizio sembra una buona idea, solo che non lo è.

Il problema è che un tale pulsante è tutt'altro che notevole. Non vuoi che il tuo pulsante si fonda; vuoi che risaltino. Pertanto, dovrebbe essere creato come un elemento completamente separato che si verifica semplicemente su un sito Web, non come qualcosa che deve essere congruente con quel sito Web.

Lascia che ti dia solo un grande esempio di un pulsante simile a una mucca viola.

Mozilla Firefox

Ecco come appare una pagina di download di Firefox. Voglio che tu noti una cosa. Il pulsante a sinistra, il pulsante di download, non assomiglia a nient'altro su quella pagina. È l'unica cosa verde. È l'unico posto che presenta il logo di Firefox. È uno degli elementi più grandi lì. Si trova sopra la piega.

Tutti questi tratti rendono questo pulsante estremamente visibile. È una mucca viola. Se stai dicendo che non lo vedi, stai solo cercando di impressionare qualcuno.

In poche parole: Mirare ad avere un pulsante notevole.

2. Aspetto

Iniziamo con il colore.

Se vuoi essere notevole usa un colore che non è stato usato da nessun'altra parte sulla pagina. Proprio come i ragazzi di Firefox stanno facendo sul loro sito web. Puoi utilizzare uno strumento come Color Scheme Designer per trovare un colore che si abbina bene con la combinazione di colori attuale del tuo sito web, ma è ancora molto diverso.

E “diverso” è la parola chiave qui. Se il tuo sito web è prevalentemente blu, non vuoi un pulsante blu di acquisto. Tu non vuoi una tonalità di blu. Non vuoi qualcosa che sembra bluastro. Vuoi il rosa, o l'arancione, ecc. Sono sicuro che hai capito il punto.

Un altro trucco. L'arancione è conosciuto come il colore più visibile subito dopo il rosso. Ma non aumenta tutte le emozioni negative che fa il rosso (cose simili “fermare”, “attenzione!”, e “Pericolo”). Il pulsante arancione più popolare su Internet può essere trovato su amazon.com.

La prossima cosa su cui concentrarsi è la dimensione del pulsante. Bene, cosa posso dire, deve essere GRANDE. Più grande è, meglio è. (Ancora, esempio di Firefox.)

“Posso renderlo ancora più grande?” è una bella domanda da porsi durante la fase di progettazione. Fallo molto.

Dovrebbe essere semplice o appariscente? Un pulsante non può essere troppo appariscente. Guarda il pulsante Firefox ancora una volta. È appariscente. Ha una volpe arancione su di esso, eppure sembra ancora un pulsante. E questo è un confine che non puoi attraversare. Se il tuo pulsante non sembra uno, nessuno lo farà mai.

Ecco perché non esiste una risposta semplice alla quale si è meglio - appariscente o semplice. Devi solo scoprirlo da solo. Dividi sempre il test. Crea due pulsanti, uno appariscente e uno semplice. Usali entrambi allo stesso tempo e vedi quale si comporta meglio. Lo Strumento per ottimizzare il sito di Google ti aiuterà in questo.

Un semplice esempio di un semplice pulsante.

ThemeFuse

Come puoi vedere, il pulsante non utilizza alcuna volpe arancione, ma è ancora altamente visibile. In effetti, ThemeFuse (un negozio di temi WordPress di qualità, di cui faccio parte) fornisce qualcosa chiamato shortcode. Tra l'altro, questi codici brevi rendono davvero facile creare pulsanti dall'aspetto gradevole.

Ad esempio, con una sola riga di:

[button link = "domain.com"] Fai clic qui per acquistare il mio fantastico prodotto! [/ button]

Ottengo questo risultato:

3. Font

Carattere sans-serif è lo standard per tutti i tipi di pulsanti. Questo perché i font sans-serif sono molto leggibili per ogni utilizzo online. (Il rovescio della medaglia, i caratteri serif sono migliori per le pubblicazioni di stampa.)

Vuoi che la copia sul tuo pulsante sia il più leggibile possibile, in quanto è la porzione di testo più importante della pagina. Tutto in maiuscolo non è una buona idea. Il caso misto funziona molto meglio. Con lettere maiuscole intendo la prima lettera di ogni parola che è un carattere maiuscolo. (Tranne per parole come “per”, “il”, “e”, eccetera.)

(Fonte immagine: Gomediazine)

Alcuni font sicuri che puoi usare sono: Arial, Helvetica, Franklin Gothic, Myriad, o qualsiasi altro classico font sans-serif, davvero.

Ora, per quanto riguarda il colore. La copia dovrebbe, ovviamente, essere in forte contrasto con il colore del pulsante. Non vuoi grigio su grigio. Vuoi nero su bianco o blu su arancione.

Ancora una volta, il testo deve essere altamente leggibile.

4. Posizionamento

Il miglior posizionamento dipende dal design del tuo sito web, che probabilmente non è sorprendente. Ma ci sono ancora alcune regole degne di essere rispettate.

Mettilo nel posto più ovvio possibile. Non cercare di essere creativo qui. Il posizionamento dovrebbe essere ovvio per il cliente / utente.

Ogni volta che qualcuno visita il sito web si aspetta di vedere certe cose in determinati posti. Cose come: il logo nell'angolo in alto a sinistra, il sommario del carrello degli acquisti nell'angolo in alto a destra, la clausola sul copyright nel footer, ecc. Il tuo compito è cercare di capire qual è il posto più ovvio per un pulsante di acquisto e metterlo lì.

Certo, deve essere il luogo più visibile allo stesso tempo. Questo significa due cose:

1. esso assolutamente deve essere posizionato Sopra la piega, e
2. Non aver paura degli spazi bianchi. Whitespace è un amico di ogni buon web designer. Ricorda, non importa quanta roba puoi inserire su un sito web, ciò che importa è quanto roba puoi rimuovere da esso.

Puoi inserire la strategia di posizionamento sugli steroidi duplicando il pulsante e posizionandolo nella parte inferiore della pagina. In questo modo, quando qualcuno legge l'intera pagina, può comunque agire in fondo.

5. Elementi extra

Questa è la ciliegina sulla torta. Gli elementi extra migliorano ulteriormente la visibilità del tuo pulsante. Esempi di elementi: frecce, carrelli della spesa, lenti d'ingrandimento, segni più o vari elementi di branding.

Il mio esempio preferito - l'esempio di Firefox - utilizza un elemento extra molto interessante: l'arancione volpe (ovvero il loro logo).

Una regola empirica consiste nell'utilizzare elementi aggiuntivi enfatizzare lo scopo del pulsante. Ad esempio, due frecce rivolte verso il basso funzionano perfettamente per un pulsante di download. Un'icona del carrello degli acquisti funziona alla grande con un pulsante Aggiungi al carrello (l'esempio di Amazon sopra). La lente d'ingrandimento funziona alla grande con un pulsante di ricerca. E così via.

Puoi anche utilizzare alcuni elementi di branding. Ad esempio cose come: icona RSS standard con un pulsante subscribe-to-feed, un'icona di uccello con un pulsante follow-me-on-twitter, una volpe arancione con un pulsante download-firefox, il tuo logo con un buy-my- pulsante roba.

Ecco alcuni esempi:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

Potere di "Libero"

Un altro trucco è l'uso della parola più potente in inglese - GRATUITAMENTE. Ogni volta che qualcosa viene pubblicizzato come libero, la gente inizia ad agire prevedibilmente irrazionale (dai un'occhiata a un grande libro di Dan Ariely, "The Upside of Irrationality" per scoprire cosa intendo.)

Altri esempi:

Freshbooks

Wufoo

Freeagent.com

Qual'è il prossimo?

Se sei un esperto di Photoshop o di altri software simili, puoi semplicemente andare avanti e creare un bel pulsante in questo momento. Un altro modo è diventare un fortunato possessore di qualsiasi tema WordPress da ThemeFuse, come ho già detto in questo post.

Qual è il tuo consiglio sulla progettazione di un ottimo pulsante di acquisto? Mi piacerebbe aggiornare questo post con le tue opinioni.