5 tips til at designe en vindende Buy Button

Hvis du er designer eller online marketingmedarbejder, eller du bare tilfældigvis ejer et websted, hvor du forsøger at sælge noget, skal du til enhver tid designe en ordentlig "buy button". Og så vil du hurtigt finde ud af at bare sætte en “køb nu” tekst på et blåt rektangel er bare ikke nok, hvis du håber på gode resultater.

Heldigvis er det ikke så svært at designe en ordentlig "buy-knap", når du kommer til at kende nogle grundlæggende viden. Her går.

Først og fremmest tekst på din knap er det vigtigste, men der er nogle andre funktioner, der skal løses. Hvorfor siger jeg, at teksten er den vigtigste? Forestil dig dette - hvad er meningen med at have en smukt designet knap, hvis teksten på den siger “Gå ad helvede til!”? Sag lukket. God kopi er hvor pengene er lavet.

I dagens artikel diskuterer vi 5 afgørende træk af en ordentlig "buy button". Lad os se!

1. Samlet stil

Dette er nummer 1 på denne liste, ikke uden grund, da det er det vigtigste træk.

Vil du vend din knap til en lilla ko. Dette er et koncept populært af Seth Godin. Kort sagt, du vil have det bemærkelsesværdigt; ved bemærkelsesværdige mener jeg noget, der ikke kan overses. Noget som en lilla ko midt i en græsareal.

Nogle designere er ikke særlig gode til dette. Det er fristende at oprette en knap, der binder smukt sammen med farverne og stilen på den hjemmeside, den sidder på. Først ser det ud som en meget god ide, det er kun det.

Problemet er, at en sådan knap er langt fra bemærkelsesværdig. Du vil ikke have din knap til at blende ind; du vil have det til at skille sig ud. Derfor bør det oprettes som et helt særskilt element, der bare sker for at sidde på et websted, ikke som noget, der skal være kongruent med hjemmesiden.

Lad mig bare give dig et godt eksempel på en lilla-ko lignende knap.

Mozilla Firefox

Sådan ser en Firefox-downloadside ud. Jeg vil have dig til at bemærke en ting. Knappen til venstre, downloadknappen, ser intet ud som noget andet på den side. Det er den eneste grønne ting. Det er det eneste sted, der præsenterer Firefox-logoet. Det er et af de største elementer der. Den er placeret over folden.

Alle disse træk gør denne knap yderst synlig. Det er en lilla ko. Hvis du siger, at du ikke ser det, prøver du bare at imponere nogen.

I en nøddeskal: Målet er at have en bemærkelsesværdig knap.

2. Udseende

Lad os begynde med farven.

Hvis du vil være bemærkelsesværdig, brug en farve, der ikke er brugt andre steder på siden. Ligesom Firefox guys gør på deres hjemmeside. Du kan bruge et værktøj som Color Scheme Designer til at finde en farve, der ser godt ud med dit nuværende farveformat, men det er stadig meget anderledes.

Og “forskellige” er nøgleordet her. Hvis din hjemmeside er for det meste blå, vil du ikke have en blå buy-knap. Du vil ikke have en skygge af blå. Du vil ikke have noget, der ser noget blåt ud. Du vil have pink, eller orange, osv. Jeg er sikker på at du får point.

Endnu et trick. Orange er kendt som den mest synlige farve lige efter rødt. Men det hæver ikke alle de negative følelser, rødt gør (ting som “hold op”, “pas på!”, og “fare”). Den mest populære orange knap på internettet findes på amazon.com.

Næste ting at fokusere på er knappens størrelse. Nå, hvad kan jeg sige, det skal være stort. Jo større det er, desto bedre. (Igen, Firefox eksempel.)

“Kan jeg gøre det endnu større?” er et godt spørgsmål at stille under designfasen. Gør det meget.

Skal det være enkelt eller prangende? En knap kan ikke være for prangende. Se igen på Firefox-knappen. Det er prangende. Den har en orange ræv på den, men det ser stadig ud som en knap. Og det er en grænse, du ikke kan krydse. Hvis din knap ikke ligner en, vil den aldrig klikke på den.

Derfor er der ikke noget simpelt svar på hvilket man er bedre - prangende eller simpelt. Du skal bare finde ud af selv. Del altid test. Opret to knapper, en prangende og en enkel. Brug begge dem på samme tid, og se, hvilken udfører bedre. Google Website Optimizer hjælper dig med det.

Bare et hurtigt eksempel på en simpel knap.

ThemeFuse

Som du kan se, bruger knappen ikke nogen orange ræve, men den er stadig meget synlig. Faktisk er ThemeFuse (et premium WordPress-temabutik, som jeg er en del af), der giver lidt noget, der hedder kortkoder. Disse kortkoder gør det blandt andet meget nemt at oprette flotte knapper.

For eksempel med kun en enkelt linje af:

[button link = "domain.com"] Klik her for at købe mit fantastiske produkt! [/ button]

Jeg får dette resultat:

3. Skrifttype

Sans-serif skrifttype er standarden til alle slags knapper. Det skyldes, at sans-serif-skrifttyper er meget læsbare til enhver online brug. (På forsiden er serif skrifttyper bedre til trykte publikationer.)

Du vil have kopien på din knap for at være så læsbar som muligt, da det er det vigtigste stykke tekst på siden. All-caps er ikke en god idé. Mixed-case fungerer meget bedre. Ved blandet tilfælde betyder jeg, at det første bogstav i hvert ord er en stor bogstav. (Undtagen ord som “til”, “det”, “og”, etc.)

(Billedkilde: Gomediazine)

Nogle sikre skrifttyper du kan bruge er: Arial, Helvetica, Franklin Gothic, Myriad eller enhver anden klassisk sans-serif skrifttype, virkelig.

Hvad med farven. Kopien skal selvfølgelig være i høj kontrast til knappens farve. Du ønsker ikke grå-på-grå. Du vil have sort-hvide eller blå-på-orange.

Igen skal teksten være meget læsbar.

4. Placering

Den bedste placering afhænger af designet af dit websted, hvilket sandsynligvis ikke er overraskende. Men der er stadig nogle regler, der er værdige.

Placer den i mest oplagte plads muligt. Prøv ikke at være kreativ her. Placeringen skal være indlysende for kunden / brugeren.

Hver gang nogen besøger hjemmesiden forventer de at se visse ting på bestemte steder. Ting som: logo øverst til venstre, indkøbsoversigt øverst til højre, ophavsretsklausul i footer osv. Dit job er at forsøge at finde ud af, hvad der er det mest oplagte sted for en buy-knap og bare lægge det der.

Det skal selvfølgelig være det mest synlige sted på samme tid. Det betyder to ting:

1. Det absolut skal placeres over folden, og
2. Vær ikke bange for whitespace. Whitespace er en ven til alle gode webdesignere. Husk, det er ligegyldigt hvor mange ting du kan placere på et websted, hvad der betyder noget er, hvor mange ting du kan fjerne fra det.

Du kan sætte din placeringsstrategi på steroider ved at duplikere knappen og også placere den nederst på siden. På den måde, når nogen læser gennem hele siden, kan de stadig gribe ind i bunden af ​​den.

5. Ekstra elementer

Dette er prikken på kagen. Ekstra elementer forbedrer synligheden af ​​din knap endnu mere. Eksempler på elementer: pile, indkøbsvogne, forstørrelsesglas, plusskilt eller forskellige branding elementer.

Mit yndlingseksempel - Firefox-eksemplet - bruger et rigtig godt ekstra element - den orange fox (aka deres logo).

En tommelfingerregel er at bruge ekstra elementer som understrege formålet med knappen. For eksempel, to pile, der peger ned, fungerer godt for en download-knap. Et indkøbskurvikon fungerer fint med en add-to-cart-knap (ovenstående amazon eksempel). Forstørrelsesglas fungerer fint med en søgeknap. Og så videre.

Du kan også bruge nogle branding elementer. For eksempel ting som: standard RSS-ikon med en abonnent-til-feed-knap, et fugl ikon med en follow-on-twitter-knap, en orange ræv med en download-firefox-knap, dit eget logo med en buy-my- ting knappen.

Her er nogle eksempler:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

Kraft af "fri"

Endnu et trick er brugen af ​​det stærkeste ord på engelsk sprog - GRATIS. Når noget er annonceret som gratis, begynder folk at handle forudsigeligt irrationelt (tjek en stor bog af Dan Ariely, "Upside of Irrationality" for at finde ud af, hvad jeg mener.)

Flere eksempler:

FreshBooks

Wufoo

Freeagent.com

Hvad er næste??

Hvis du er god i Photoshop eller lignende software, kan du bare gå videre og oprette en god knap lige nu. En anden måde er at blive en heldig ejer af ethvert WordPress tema ved ThemeFuse, som jeg tidligere har nævnt i dette indlæg.

Hvad er dit råd om at designe en god købsknap? Jeg vil gerne opdatere dette indlæg med dine meninger.