5 tips voor het ontwerpen van een winnende koopknop

Als je een ontwerper bent, of een online marketeer, of je toevallig toevallig een website hebt waar je iets probeert te verkopen, zul je op een gegeven moment een goede "koopknop" moeten ontwerpen. En dan zul je snel ontdekken dat het gewoon een “koop nu” tekst op een blauwe rechthoek is niet genoeg als je hoopt op goede resultaten.

Gelukkig is het ontwerpen van een goede "koopknop" niet zo moeilijk als je enige basiskennis leert kennen. Hier gaat.

Allereerst het tekst op uw knop is het belangrijkste, maar er zijn enkele andere functies die moeten worden aangepakt. Waarom zeg ik dat de tekst het belangrijkste is? Stel je dit eens voor, wat heeft het voor zin om een ​​mooi vormgegeven knop te hebben als de tekst erop staat “Loop naar de hel!”? Zaak gesloten. Goed exemplaar is waar de gelden worden gemaakt.

In het artikel van vandaag bespreken we 5 cruciale eigenschappen van een goede "koopknop". Laten we kijken!

1. Algemene stijl

Dit is het nummer 1 punt in deze lijst, niet zonder reden, want het is het belangrijkste kenmerk.

U wilt verander je knop in een paarse koe. Dit is een concept gepopulariseerd door Seth Godin. Kortom, je wilt dat het opmerkelijk is; door opmerkelijk bedoel ik iets dat niet over het hoofd gezien kan worden. Iets als een paarse koe in het midden van een weiland.

Sommige ontwerpers zijn hier niet erg goed in. Het is verleidelijk om een ​​knop te maken die prachtig aansluit bij de kleuren en stijl van de website waarop deze zich bevindt. In eerste instantie lijkt het een heel goed idee, maar dat is het niet.

Het probleem is dat zo'n knop verre van opmerkelijk is. U wilt niet dat uw knop oplicht; je wilt dat het opvalt. Daarom moet het worden gemaakt als een volledig apart element dat toevallig op een bepaalde website zit, niet als iets dat congruent moet zijn met die website..

Laat me je een goed voorbeeld geven van een paarse koe-achtige knop.

Mozilla Firefox

Dit is hoe een Firefox-downloadpagina eruit ziet. Ik wil dat je één ding opmerkt. De knop aan de linkerkant, de downloadknop, lijkt op niets anders op die pagina. Het is het enige groene ding. Het is de enige plaats met het Firefox-logo. Het is een van de grootste elementen daar. Het bevindt zich boven de vouw.

Al deze eigenschappen maken deze knop buitengewoon zichtbaar. Het is een paarse koe. Als je zegt dat je het niet ziet, probeer je gewoon indruk op iemand te maken.

In een notendop: Streef ernaar een opmerkelijke knop te hebben.

2. Uiterlijk

Laten we beginnen met de kleur.

Als je opvalt, gebruik dan een kleur die nergens anders op de pagina is gebruikt. Net zoals Firefox jongens doen op hun website. U kunt een tool zoals Color Scheme Designer gebruiken om een ​​kleur te vinden die er goed uitziet met het huidige kleurenschema van uw website, maar die nog steeds heel anders is.

En “verschillend” is het sleutelwoord hier. Als uw website grotendeels blauw is, wilt u geen blauwe koopknop. Je wilt geen blauwtint. Je wilt niets dat er blauwachtig uitziet. U wilt roze of oranje, enz. Ik weet zeker dat u begrijpt wat u bedoelt.

Nog een truc. Oranje staat bekend als de meest zichtbare kleur direct na rood. Maar het verhoogt niet alle negatieve emoties die rood doet (dingen zoals “hou op”, “pas op!”, en “Gevaar”). De meest populaire oranje knop op internet is te vinden op amazon.com.

Het volgende om op te focussen is de grootte van de knop. Nou, wat kan ik zeggen, het moet GROOT zijn. Hoe groter hoe beter. (Nogmaals, Firefox-voorbeeld.)

“Kan ik het nog groter maken??” is een goede vraag om te stellen tijdens de ontwerpfase. Doe het veel.

Zou het moeten zijn eenvoudig of flitsende? Een knop kan niet te opzichtig zijn. Kijk nogmaals naar de Firefox-knop. Het is flitsende. Het heeft een oranje vos, maar het ziet er nog steeds uit als een knop. En dat is een grens die je niet kunt overschrijden. Als uw knop er niet als een uitziet, klikt er nooit iemand op.

Daarom is er geen eenvoudig antwoord op wat beter is - flitsend of eenvoudig. Je moet het gewoon voor jezelf ontdekken. Splits de test altijd. Maak twee knoppen, een flitsende en een eenvoudige. Gebruik ze allebei tegelijkertijd en kijk welke beter presteert. Google Website Optimizer helpt u daarbij.

Gewoon een snel voorbeeld van een eenvoudige knop.

ThemeFuse

Zoals u kunt zien, gebruikt de knop geen oranje vossen, maar deze is nog steeds goed zichtbaar. In feite biedt ThemeFuse (een premium WordPress-themawinkel waar ik deel van uitmaak) een beetje iets genaamd shortcodes. Deze shortcodes maken het onder andere heel gemakkelijk om mooie knoppen te maken.

Bijvoorbeeld, met slechts een enkele regel van:

[button link = "domein.com"] Klik hier om mijn geweldige product te kopen! [/ button]

Ik krijg dit resultaat:

3. Lettertype

Sans-serif-lettertype is de standaard voor allerlei soorten knoppen. Dat komt omdat schreefloze lettertypen zeer goed leesbaar zijn voor elk online gebruik. (Aan de andere kant zijn serif-lettertypen beter voor gedrukte publicaties.)

U wilt dat de kopie op uw knop zo leesbaar mogelijk is, omdat dit het belangrijkste stuk tekst op de pagina is. All-caps zijn geen goed idee. Mixed-case werkt veel beter. Met een gemengd doel bedoel ik de eerste letter van elk woord dat een hoofdletter is. (Behalve voor woorden als “voor”, “de”, “en”, enz.)

(Bron afbeelding: Gomediazine)

Sommige veilige lettertypen die u kunt gebruiken zijn: Arial, Helvetica, Franklin Gothic, Myriad of een ander klassiek schreefloos lettertype, echt.

Hoe zit het met de kleur. De kopie moet natuurlijk een hoog contrast hebben met de kleur van de knop. U wilt niet grijs-op-grijs. U wilt zwart-wit of blauw-op-oranje.

Nogmaals, de tekst moet zeer leesbaar zijn.

4. Plaatsing

De beste plaatsing hangt af van het ontwerp van uw website, wat waarschijnlijk niet verrassend is. Maar er zijn nog steeds enkele regels die de moeite waard zijn.

Plaats het in de meest voor de hand liggende plaats mogelijk. Probeer hier niet creatief te zijn. De plaatsing moet duidelijk zijn voor de klant / gebruiker.

Elke keer dat iemand de website bezoekt, verwachten ze bepaalde dingen op bepaalde plaatsen te zien. Dingen als: logo in de linkerbovenhoek, overzicht van winkelwagen in de rechterbovenhoek, auteursrechtclausule in het voetgedeelte, enz. Je taak is om te proberen uit te zoeken wat de meest voor de hand liggende plaats is voor een koopknop en zet hem daar gewoon neer.

Het moet natuurlijk tegelijkertijd de meest zichtbare plaats zijn. Dit betekent twee dingen:

1. Het Absoluut moet worden geplaatst boven de vouw, en
2. Wees niet bang voor witruimte. Whitespace is een vriend van elke goede webontwerper. Onthoud dat het niet uitmaakt hoeveel dingen je op een website kunt plaatsen, maar het gaat erom hoeveel dingen je eruit kunt verwijderen.

U kunt uw plaatsingsstrategie op steroïden plaatsen door de knop te dupliceren en deze ook onderaan de pagina te plaatsen. Op die manier kunnen mensen die de hele pagina doorlezen nog steeds actie onder nemen.

5. Extra elementen

Dit is de kers op de taart. Extra elementen verbeteren de zichtbaarheid van je knop nog verder. Voorbeelden van elementen: pijlen, winkelwagentjes, vergrootglazen, plustekens of verschillende merkelementen.

Mijn favoriete voorbeeld - het Firefox-voorbeeld - gebruikt een heel cool extra element - de oranje vos (ook hun logo genoemd).

Een vuistregel is om extra elementen te gebruiken benadruk het doel van de knop. Twee naar beneden wijzende pijlen werken bijvoorbeeld uitstekend voor een downloadknop. Een winkelwagentje pictogram werkt geweldig met een add-to-cart-knop (het Amazon voorbeeld hierboven). Vergrootglas werkt prima met een zoekknop. Enzovoorts.

U kunt ook een aantal merkelementen gebruiken. Bijvoorbeeld zaken als: standaard RSS-pictogram met een subscribe-to-feed-knop, een vogelpictogram met een follow-me-op-twitter-knop, een oranje vos met een download-firefox-knop, uw eigen logo met een buy-my- spullen knop.

Hier zijn enkele voorbeelden:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

uploadify

Kracht van "Gratis"

Nog een truc is het gebruik van het krachtigste woord in het Engels - GRATIS. Wanneer iets als gratis wordt geadverteerd, beginnen mensen voorspelbaar irrationeel te handelen (kijk eens naar een geweldig boek van Dan Ariely, "Het voordeel van irrationaliteit" om erachter te komen wat ik bedoel.)

Meer voorbeelden:

FreshBooks

Wufoo

Freeagent.com

Wat is het volgende?

Als je bedreven bent in Photoshop of andere soortgelijke software, kun je gewoon doorgaan en nu een leuke knop maken. Een andere manier is om een ​​gelukkige eigenaar te worden van elk WordPress-thema door ThemeFuse, zoals ik eerder in dit bericht heb genoemd.

Wat is uw advies over het ontwerpen van een geweldige koopknop? Ik wil dit bericht graag bijwerken met je mening.