5 tips för att designa en vinnande Köp-knapp

Om du är en designer eller en marknadsförare på nätet, eller om du bara råkar äga en webbplats där du försöker sälja något, måste du till en viss tid utforma en riktig "buy button". Och då kommer du snabbt att få reda på att bara sätta en “köp nu” Text på en blå rektangel är inte tillräckligt om du hoppas på några bra resultat.

Lyckligtvis är det inte så svårt att utforma en riktig "buy button" när du kommer att lära dig några grundläggande kunskaper. Här kommer.

Först av allt Text på din knapp är det viktigaste, men det finns några andra funktioner som behöver åtgärdas. Varför säger jag att texten är den viktigaste? Föreställ dig detta - vad är meningen med att ha en vackert utformad knapp om texten står på den “Dra åt helvete!”? Avslutat fall. Bra kopia är där pengarna görs.

I dagens artikel diskuterar vi 5 viktiga drag av en riktig "buy button". Låt oss ta en titt!

1. Övergripande stil

Detta är punkt 1 på denna lista, inte utan anledning, eftersom det är det viktigaste draget.

Du vill vrid knappen till en lila ko. Detta är ett koncept som populariseras av Seth Godin. Kort sagt, du vill att det ska vara anmärkningsvärt; med anmärkningsvärt menar jag något som inte kan förbises. Något som en lila ko i mitten av en bete.

Vissa designers är inte särskilt bra på detta. Det är frestande att skapa en knapp som binder vackert med färgerna och stilen på webbplatsen den sitter på. Först verkar det som en mycket bra idé, bara det är det inte.

Problemet är att en sådan knapp är långt ifrån märkvärdig. Du vill inte att din knapp ska smälta in; du vill att den ska sticka ut. Därför bör det skapas som ett helt separat element som bara händer att sitta på en webbplats, inte som något som måste vara kongruent med den webbplatsen.

Låt mig bara ge dig ett bra exempel på en lila-koliknande knapp.

Mozilla Firefox

Så här ser en Firefox-nedladdningssida ut. Jag vill att du märker en sak. Knappen till vänster, nedladdningsknappen, ser inget ut som något annat på den sidan. Det är den enda gröna saken. Det är den enda platsen som presenterar Firefox-logotypen. Det är ett av de största elementen där. Den ligger ovanför veckan.

Alla dessa egenskaper gör denna knapp extremt synlig. Det är en lila ko. Om du säger att du inte ser det försöker du bara imponera på någon.

I ett nötskal: Syfte med att ha en anmärkningsvärd knapp.

2. Utseende

Låt oss börja med färgen.

Om du vill vara anmärkningsvärd använder du en färg som inte har använts någon annanstans på sidan. Precis som Firefox killar gör på deras hemsida. Du kan använda ett verktyg som Color Scheme Designer för att hitta en färg som ser bra ut med dagens färgschema på din webbplats men är fortfarande väldigt annorlunda.

Och “annorlunda” är sökordet här. Om din webbplats är mestadels blå, vill du inte ha en blå köpknapp. Du vill inte ha en nyans blå. Du vill inte ha något som ser något blått ut. Du vill ha rosa, eller apelsin, etc. Jag är säker på att du får poängen.

En mer knep. Orange är känd som den mest synliga färgen direkt efter rött. Men det väcker inte alla negativa känslor som röda gör (saker som “sluta”, “se upp!”, och “fara”). Den mest populära orange knappen på internet finns på amazon.com.

Nästa sak att fokusera på är knappens storlek. Tja, vad kan jag säga, det måste vara stort. Ju större det är desto bättre. (Återigen, Firefox-exempel.)

“Kan jag göra det ännu större?” är en bra fråga att fråga under designfasen. Gör det mycket.

Skulle det vara enkelt eller prickigt? En knapp kan inte vara för pratsam. Titta på Firefox-knappen en gång till. Det är prickigt. Den har en orange räv på den, men det ser fortfarande ut som en knapp. Och det är en gräns som du inte kan korsa. Om din knapp inte ser ut som någon kommer någonsin att klicka på den.

Därför finns det inget enkelt svar på vilket man är bättre - prickigt eller enkelt. Du måste bara ta reda på dig själv. Dela alltid testet. Skapa två knappar, en flashig och en enkel. Använd båda samtidigt, och se vilken som fungerar bättre. Google Website Optimizer hjälper dig med det.

Bara ett snabbt exempel på en enkel knapp.

ThemeFuse

Som du kan se använder knappen inte några orange rävar, men den är fortfarande mycket synlig. Faktum är att ThemeFuse (en premium WordPress-temabutik, som jag ingår i) ger lite något som heter kortnummer. Bland dessa kortkodar är det verkligen lätt att skapa snygga knappar.

Till exempel, med bara en enda rad av:

[button link = "domain.com"] Klicka här för att köpa min fantastiska produkt! [/ button]

Jag får detta resultat:

3. Teckensnitt

Sans-serif typsnitt är standarden för alla typer av knappar. Det beror på att sans-serif-teckensnitt är väldigt läsbar för varje online-användning. (På flipsidan är serif typsnitt bättre för tryckta publikationer.)

Du vill att kopian på din knapp ska vara så läsbar som möjligt, eftersom det är den viktigaste texten på sidan. All caps är inte en bra idé. Mixed-case fungerar mycket bättre. Med mellanslag menar jag att varje bokstavs första bokstav är en stor bokstav. (Förutom ord som “för”, “de”, “och”, etc.)

(Bildkälla: Gomediazine)

Några säkra teckensnitt du kan använda är: Arial, Helvetica, Franklin Gothic, Myriad eller någon annan klassisk sans-serif typsnitt, verkligen.

Nu vad sägs om färgen. Kopian ska naturligtvis vara i hög kontrast till knappens färg. Du vill inte ha grå-på-grått. Du vill ha svartvit eller blå-på-orange.

Återigen måste texten vara läsbar.

4. Placering

Den bästa placeringen beror på utformningen av din webbplats, vilket förmodligen inte är överraskande. Men det finns fortfarande några regler som är värda att följa.

Placera den i mest uppenbara plats möjligt. Försök inte vara kreativ här. Placeringen ska vara uppenbar för kunden / användaren.

Varje gång någon besöker webbplatsen förväntar de sig att se vissa saker på vissa ställen. Saker som: logo i övre vänstra hörnet, varukorgsöversikt i övre högra hörnet, upphovsrättsklausul i sidfot etc. Ditt jobb är att försöka lista ut vad som är den mest uppenbara platsen för en köpknapp och bara sätta den där.

Det måste givetvis vara den mest synliga platsen samtidigt. Det betyder två saker:

1. Det absolut måste placeras ovanför vikten, och
2. Var inte rädd för whitespace. Whitespace är en vän till alla bra webbdesigner. Kom ihåg att det spelar ingen roll hur mycket saker du kan placera på en webbplats, det som är viktigt är hur mycket du kan ta bort från det.

Du kan sätta din placeringsstrategi på steroider genom att duplicera knappen och placera den längst ner på sidan. På det sättet, när någon läser igenom hela sidan kan de fortfarande vidta åtgärder längst ner på den.

5. Extra element

Detta är glasyren på tårtan. Extra element förbättrar visningen av din knapp ytterligare. Exempel på element: pilar, kundvagnar, förstoringsglasögon, plusskyltar eller olika märkeselement.

Mitt favoritexempel - Firefox-exemplet - använder ett riktigt coolt extraelement - orange räv (aka deras logotyp).

En tumregel är att använda extra element som betona ändamålet med knappen. Till exempel, två pekar som pekar ner fungerar bra för en nedladdningsknapp. En ikon för kundvagnen fungerar bra med en tilläggskarta (ovanstående amazon exempel). Förstoringsglas fungerar bra med en sökknapp. Och så vidare.

Du kan också använda vissa varumärkeselement. Till exempel saker som: standard RSS-ikon med en prenumerera-på-mat-knapp, en fågelikon med en knapp på mig-på-twitter, en orange räv med en download-firefox-knapp, din egen logotyp med en buy-my- greppknappen.

Här är några exempel:

Wakeinteractive

Commercialiq

Media

Unlocking.com

Sofasurfer.eu

Uploadify

Kraft av "fri"

Ett annat knep är användningen av det kraftfulla ordet på engelska - GRATIS. När något är annonserat som gratis börjar folk att agera förutsägbart irrationellt (kolla in en bra bok av Dan Ariely, "Upside of Irrationality" för att ta reda på vad jag menar.)

Fler exempel:

Freshbooks

Wufoo

Freeagent.com

Vad kommer härnäst?

Om du är typ av skicklig i Photoshop eller annan liknande programvara kan du bara fortsätta och skapa en fin knapp just nu. Ett annat sätt är att bli en lycklig ägare till något WordPress-tema av ThemeFuse, som jag tidigare nämnt i det här inlägget.

Vad är din råd om att utforma en bra köpknapp? Jag skulle gärna uppdatera det här inlägget med dina åsikter.