Ontwerpsystemen

De anatomie van een CTA-knop in 2017: praktische tips voor spraak en toon, stijl en componenten.

Hier zal ik uitleggen hoe een ontwerpsysteem werkt met behulp van een enkel interface-element: de CTA-knop die verantwoordelijk is voor het doorverwijzen van de gebruiker naar de hoofdactie van uw webpagina.

Dit artikel heeft als doel enkele richtlijnen te presenteren voor het ontwerpen van een effectieve call-to-action-component en hoe teams dit interface-element succesvol kunnen laten samenwerken.

Stem klank

Waarom zou ik op deze knop klikken?

een. Beginnend met een actiewerkwoord en schrijf in eerste persoon

Uw CTA-knop moet beginnen met een actiewerkwoord zoals "Start", "Get" of "Download". Ze zijn actiegericht.

In een test van Michael Aagaard (Unbounce's Senior Conversion Optimizer) ontdekte hij dat het wijzigen van de kopie van de CTA-knop van de tweede persoon naar de eerste persoon resulteerde in een 90% hogere klikfrequentie.

b. Verwachting

De meeste webgebruikers aarzelen om dingen die ze op het web presenteren, tegen nominale waarde te nemen. Uit ervaring is hun vertrouwen eerder gebrand door links die een gratis service beloven, alleen om erachter te komen dat ze hun creditcardnummer moeten opgeven om te krijgen wat ze willen.

Om de klikconversie te vergroten en vertrouwen op te bouwen, anticipeer je op de scepsis van de gebruiker en vertel ze wat ze zullen winnen door de actie te ondernemen die je aan hen hebt gepresenteerd. Denk bij het ontwerpen van een call-to-actieknop aan alle mogelijke vragen van gebruikers en zorg ervoor dat u deze op tijd beantwoordt.

c. Gevoel van urgentie

Het formuleren van de actie met behulp van gewaagde, zelfverzekerde en bevelende woorden kan de perceptie van de gebruiker zodanig veranderen dat ze ervan worden overtuigd dat ze niet langer moeten wachten om actie te ondernemen en dat wachten op actie zou resulteren in een boete of een gemiste kans.

d. Gevoel van gemak

Vaak komt de aarzeling van een gebruiker om actie te ondernemen voort uit de gedachte dat een actie moeilijk, duur of tijdrovend zal zijn. Door aan deze zorgen te voldoen, kan uw CTA-knop tot meer conversies leiden.

e. Woorden activeren

Triggerwoorden zijn de woorden en zinnen die een gebruiker ertoe aanzetten om te klikken. Ze bevatten de essentiële elementen om de gebruiker de motivatie te geven om verder te browsen. Geef ze een goede reden om de actie te ondernemen die u wilt. Als de gebruiker op zoek is naar "plannen" of "prijzen" en uw CTA-knop zegt "plannen" of "prijzen", dan klikken ze erop. Dus in dit geval zouden 'plannen' en 'prijzen' de hoofdwoorden zijn.

Denk aan trigger-woorden zoals zoekwoorden!

Jared Spool heeft goede tips in het artikel: The Right Trigger Words.

Stijl

Waar moet ik klikken?

een. Vorm

Het eerste dat u moet weten, is de vorm van uw CTA-knop. De twee meest populaire knopvormen zijn afgeronde en vierkante randen, en de vorm die het beste voor u werkt, hangt grotendeels af van testen. Vergeet deze factor niet. Knopvorm kan en heeft invloed op conversiepercentages.

b. Grootte

In webpagina's geeft de grootte van een element ten opzichte van de omliggende elementen het belang ervan aan: hoe groter het element, hoe belangrijker het is. Bepaal hoe belangrijk bepaalde siteacties zijn en pas uw CTA-knop dienovereenkomstig aan.

c. Witte afstand

Het gebruik van witruimte (of dode ruimte) rond een CTA-knop is een effectieve manier om deze te laten opvallen in gebieden met veel elementen.

d. Plaatsing

De plaatsing van een CTA-knop is van cruciaal belang om de aandacht van de bezoekers te trekken. Plaatsing op prominente locaties zoals het bovenste gedeelte van een webpagina kan leiden tot hogere conversies van bestemmingspagina's omdat gebruikers waarschijnlijk de CTA-knop opmerken en actie ondernemen.

Ontwerpers die mobiele apps gebruiken die zijn ontworpen met de normen van Google Material Design, weten al dat de primaire knop (FAB - Float Action Button) zich rechts onderaan het scherm bevindt. Plaatsing is belangrijk!

e. Contrasterende kleur

Stel een accentkleur in voor uw CTA-knop en blijf daarbij. Gebruik niet de primaire of secundaire kleur van uw merk.

Michael Aagaard zegt:

Mijn beste advies is om gezond verstand en contrasterende kleuren te gebruiken bij het ontwerpen van uw bestemmingspagina-knoppen. De goede oude "squint-test" is altijd nuttig. Stel uw pagina samen, neem een ​​paar stappen terug, knijp in uw ogen en kijk of uw knop opvalt. Ik begin meestal met het experimenteren met een oranje of groene knop, simpelweg omdat ze vaak goed presteren in tests. Ik denk niet dat er een diepere psychologische reden is, het lijkt erop dat ze op de meeste bestemmingspagina's opvallen vanwege het gemiddelde ontwerp. Nogmaals, het draait allemaal om context, en ik heb tests gezien waarbij een paarse knop zowel groene als oranje variaties heeft overtroffen.

Stel je voor dat je CTA-knop bijna een afwijking op het scherm moet zijn. Vermijd hiervoor enkele Gestalt-principes zoals nabijheid, gelijkenis, continuïteit en gemeenschappelijke regio. Gebruik slechts één wet: knooppunt. Door dit te doen, blijft uw CTA-knop gemarkeerd in de weergave van uw gebruiker.

bestanddeel

Het is tijd om uw interface-elementen om te zetten in componenten!

een. Wees een component voor ontwerpers en ontwikkelaars

Ontwerpers moeten interfaces creëren die in componenten denken, met behulp van de juiste tools die op de markt beschikbaar zijn, zoals Sketch, Adobe XD, Figma, etc. Ontwikkelaars ook! Gebruik wat front-end technologie voor componenten zoals React, Angular, Vue.js, etc.

b. Gelijke naamconventie voor ontwerpers en ontwikkelaars

Nu we met componenten werken, moeten teams dezelfde taal spreken. Om dit te doen moeten we dezelfde naamgevingsconventie hebben voor componenten voor zowel ontwerpers als ontwikkelaars.

Reageer voorbeeld:
Voorbeeld schets-symbool:
knop / primaire knop
knop / secundaire knop

c. Geoptimaliseerd voor testen van eenheden

Om het QA-team efficiënter te laten werken, moet u altijd een ID voor uw component opgeven. En maak duidelijk in welke context de component wordt toegepast.

HTML-voorbeeld:

d. Geoptimaliseerd voor Analytics

Aangepaste gegevenskenmerken zijn een snelle manier om extra informatie over inhoud op de pagina vast te leggen. Het is een gestroomlijnde oplossing die u helpt beter te begrijpen hoe een gebruiker door de inhoud van de site stuurt. Aangepaste gegevenskenmerken zijn een constructie van de HTML 5-specificatie en worden breed ondersteund in alle belangrijke webbrowsers. Omdat het geldige HTML is en HTML zeer gebruiksvriendelijk is om te implementeren, maakt dit het des te aantrekkelijker om een ​​spin te nemen.

HTML-voorbeeld:

Het implementeren en gebruiken van gegevensattributen heeft verschillende voordelen:

e. Geoptimaliseerd voor A / B-testen

Breng de goede praktijken van componentoptimalisatie die hierboven werden gezegd in praktijk en geniet ervan alle tips van Voice & Tone en Style te testen.

Reageer voorbeeld:
HTML-uitvoer:
"Het doel van een test is niet om een ​​lift te krijgen, maar om een ​​leerproces te krijgen" - Dr. Flint McGlaughlin, MECLABS

Optimalisatie is een continu proces. Is niet zo belangrijk of de eerste testresultaten positief of negatief zijn.

“Natuurlijk is het makkelijker om een ​​thuisrun te maken in de eerste swing. Maar wanneer je optimalisatie als een proces benadert - geen eenmalige kans om naar de hekken te slingeren - zul je zien dat het vaak nodig is om op een paar honken te stoppen om de game te winnen "- Michael Aagaard, Unbounce

Onthouden

Niets is in steen geschreven. Veel testen. Het draait allemaal om context.

Inkomende marketing

Alles wat in dit artikel werd gepresenteerd, kan worden gecombineerd met een aantal inkomende marketingstrategie. Meer informatie over wat er in de onderstaande link staat:

Referenties