5 tips for å designe en vinnende Buy Button
Hvis du er designer, eller en nettbasert markedsfører, eller du bare tilfeldigvis eier et nettsted der du prøver å selge noe, skal du til en viss tid designe en riktig "buy button". Og så vil du raskt finne ut at bare å sette en “Kjøp nå” Tekst på et blått rektangel er bare ikke nok hvis du håper på gode resultater.
Heldigvis er det ikke så vanskelig å designe en riktig "buy button" når du blir kjent med noen grunnleggende kunnskaper. Her går.
Først av alt, Tekst på knappen er det viktigste, men det er noen andre funksjoner som må løses. Hvorfor sier jeg at teksten er den viktigste? Tenk deg dette - hva er meningen med å ha en vakkert designet knapp hvis teksten på den sier “Gå til helvete!”? Saken avsluttet. God kopi er hvor pengene er laget.
I dagens artikkel diskuterer vi 5 viktige trekk av en riktig "buy button". La oss ta en titt!
1. Samlet stil
Dette er nummer 1 på denne listen, ikke uten grunn, da det er det viktigste trekket.
Vil du vri knappen til en lilla ku. Dette er et konsept popularisert av Seth Godin. Kort sagt, du vil at det skal være bemerkelsesverdig; ved bemerkelsesverdig mener jeg noe som ikke kan overses. Noe som en lilla ku i midten av en beite.
Noen designere er ikke spesielt gode på dette. Det er fristende å skape en knapp som binder vakkert med farger og stil på nettstedet den sitter på. Først virker det som en veldig god idé, bare det er det ikke.
Problemet er at en slik knapp er langt fra bemerkelsesverdig. Du vil ikke at knappen din skal blandes inn; du vil at den skal skille seg ut. Derfor bør det opprettes som et helt eget element som bare skjer for å sitte på et nettsted, ikke som noe som må være kongruent med den nettsiden.
La meg bare gi deg et godt eksempel på en lilla-ko som knapp.
Mozilla Firefox
Dette er en Firefox nedlastingsside som ser ut. Jeg vil at du skal legge merke til en ting. Knappen til venstre, nedlastningsknappen, ser ingenting som noe annet på den siden. Det er den eneste grønne tingen. Det er det eneste stedet som presenterer Firefox-logoen. Det er en av de største elementene der. Den ligger over brettet.
Alle disse egenskapene gjør denne knappen ekstremt synlig. Det er en lilla ku. Hvis du sier at du ikke ser det, prøver du bare å imponere noen.
I et nøtteskall: Sikt på å ha en bemerkelsesverdig knapp.
2. Utseende
La oss begynne med fargen.
Hvis du vil være bemerkelsesverdig, bruk en farge som ikke er brukt andre steder på siden. Akkurat som Firefox-gutter gjør på deres hjemmeside. Du kan bruke et verktøy som Color Scheme Designer for å finne en farge som ser bra ut med dagens fargeskjema på nettstedet ditt, men er fortsatt veldig annerledes.
Og “forskjellig” er nøkkelordet her. Hvis nettstedet ditt er stort sett blått, vil du ikke ha en blå kjøpsknapp. Du vil ikke ha en skygge av blå. Du vil ikke ha noe som ser noe blått ut. Du vil ha rosa, oransje, etc. Jeg er sikker på at du får poenget.
Enda et knep. Oransje er kjent som den mest synlige farge rett etter rødt. Men det øker ikke alle negative følelser som rødt gjør (ting som “Stoppe”, “se opp!”, og “fare”). Den mest populære oransje knappen på internett finner du på amazon.com.
Neste ting å fokusere på er knappens størrelse. Vel, hva kan jeg si, det må være stort. Jo større det er, desto bedre. (Igjen, Firefox eksempel.)
“Kan jeg gjøre det enda større?” er et godt spørsmål å spørre under designfasen. Gjør det mye.
Skal det være enkelt eller prangende? En knapp kan ikke være for prangende. Se på Firefox-knappen igjen. Det er prangende. Den har en oransje fox på den, men det ser fortsatt ut som en knapp. Og det er en grense du ikke kan krysse. Hvis knappen din ikke ser ut som en, vil ingen noensinne klikke på den.
Derfor er det ikke noe enkelt svar på hvilken en er bedre - prangende eller enkel. Du må bare finne ut selv. Del alltid testen. Lag to knapper, en prangende og en enkel. Bruk begge dem samtidig, og se hvilken som fungerer bedre. Google Website Optimizer hjelper deg med det.
Bare et raskt eksempel på en enkel knapp.
ThemeFuse
Som du kan se, bruker knappen ikke noen oransje ræv, men den er fortsatt svært synlig. Faktisk, ThemeFuse (et premium WordPress-tema butikk, som jeg er en del av) gir litt noe kalt kortkoder. Disse kortkodene gjør det veldig enkelt å lage flotte knapper.
For eksempel, med bare en enkelt linje av:
[button link = "domain.com"] Klikk her for å kjøpe mitt fantastiske produkt! [/ button]
Jeg får dette resultatet:
3. Font
Sans-serif font er standarden for alle typer knapper. Det er fordi sans-serif-fonter er veldig lesbare for hver online bruk. (På forsiden er seriffonter bedre for trykte publikasjoner.)
Du vil at kopien på knappen skal være så lesbar som mulig, da det er det viktigste teksten på siden. All-caps er ikke en god ide. Mixed-case fungerer mye bedre. Ved blandet tilfelle mener jeg at første bokstav i hvert ord er en stor bokstav. (Unntatt ord som “til”, “de”, “og”, etc.)
(Bilde kilde: Gomediazine)
Noen sikre fonter du kan bruke er: Arial, Helvetica, Franklin Gothic, Myriad, eller noen annen klassisk sans-serif font, virkelig.
Nå, hva med fargen. Kopien skal selvfølgelig være i høy kontrast til fargen på knappen. Du vil ikke ha grå-på-grå. Du vil ha svart-hvitt eller blå-på-oransje.
Igjen, må teksten være svært lesbar.
4. Plassering
Den beste plasseringen er avhengig av utformingen av nettstedet ditt, som sannsynligvis ikke er overraskende. Men det er fortsatt noen regler som er verdige.
Plasser den i mest åpenbare sted mulig. Ikke prøv å være kreativ her. Plasseringen skal være åpenbar for kunden / brukeren.
Hver gang noen besøker nettstedet, forventer de å se visse ting på enkelte steder. Ting som: logo i øverste venstre hjørne, oppsummering av handlekurv øverst til høyre, opphavsrettsklausul i footer osv. Din jobb er å forsøke å finne ut hva som er det mest åpenbare stedet for en kjøpsknapp og bare sette det der.
Selvfølgelig må det være det mest synlige stedet på samme tid. Dette betyr to ting:
- Den absolutt må plasseres over brettet, og
- Ikke vær redd for hvitt plass. Whitespace er en venn av alle gode webdesignere. Husk det spiller ingen rolle hvor mye ting du kan plassere på et nettsted, det som betyr noe er hvor mye ting du kan fjerne fra det.
Du kan sette plasseringsstrategien din på steroider ved å duplisere knappen og også plassere den nederst på siden. På den måten, når noen leser gjennom hele siden, kan de fortsatt gjøre noe på bunnen av den.
5. Ekstra elementer
Dette er glasur på kaken. Ekstra elementer forbedrer synligheten til knappen din enda lenger. Eksempler på elementer: piler, handlekurver, forstørrelsesglass, pluss tegn eller ulike merkevareelementer.
Mitt favoritteksempel - Firefox-eksemplet - bruker en veldig kul ekstra element - den oransje ræven (aka deres logo).
En tommelfingerregel er å bruke ekstra elementer som understreke formålet med knappen. For eksempel, to piler som peker ned fungerer bra for en nedlastningsknapp. Et ikon for en handlekurv fungerer bra med en tilleggs-knapp-knapp (amazoneksempelet ovenfor). Forstørrelsesglass fungerer bra med en søkeknapp. Og så videre.
Du kan også bruke noen merkevareelementer. For eksempel ting som: standard RSS-ikon med en abonnent-til-mat-knappen, et fugleikon med en påfyll-knapp, en oransje rev med en nedlasting-firefox-knapp, din egen logo med en buy-my- tingknappen.
Her er noen eksempler:
Wakeinteractive
Commercialiq
Mediatemple
Unlocking.com
Sofasurfer.eu
Uploadify
Kraft av "gratis"
Ett nytt triks er bruken av det kraftigste ordet på engelsk - GRATIS. Når noe blir annonsert som gratis, begynner folk å handle forutsigbart irrasjonell (sjekk ut en flott bok av Dan Ariely, "Upside of Irrationality" for å finne ut hva jeg mener.)
Flere eksempler:
Freshbooks
Wufoo
Freeagent.com
Hva blir det neste?
Hvis du er dyktig i Photoshop eller annen lignende programvare, kan du bare gå videre og lage en fin knapp akkurat nå. En annen måte er å bli en heldig eier av et WordPress-tema ved ThemeFuse, som jeg tidligere har nevnt i dette innlegget.
Hva er ditt råd om å designe en flott kjøpsknapp? Jeg vil gjerne oppdatere dette innlegget med dine meninger.
