Hopp til innhold
SilktideHjelp

Tydelig primær CTA

Tydelig primær CTA betyr at en side har én dominerende , merket slik at en førstegangsbesøkende forstår hva som skjer videre, utformet slik at ingenting konkurrerer med den, og plassert der folk faktisk tar beslutninger – på den første skjermen og igjen ved senere beslutningspunkter, på desktop og telefon.

På denne siden antar vi at Fernwood vil at besøkende på prissiden skal starte en gratis prøveperiode, og at besøkende på refusjonsveiledningen skal laste ned referanserapporten.

Dette er konverteringsmotstykket til sidestruktur med svar først: Svar først avgjør hva siden sier; tydelig primær CTA avgjør hva siden ber om.

Hvorfor det fungerer

Besøkende lager ikke en grundig oversikt over hver knapp. De kaster et blikk, tolker tilbudet og handler eller forlater siden. Når en side tilbyr «Bestill en demo», «Start gratis», «Snakk med salg», «Abonner» og «Kontakt oss» med samme visuelle vekt, øker hvert alternativ kostnaden ved å velge – og det enkleste valget blir ingen av dem. Klassisk konverteringsforskning (for eksempel Nielsen Norman Group om hvordan folk tar beslutninger og kostnaden ved konkurrerende handlinger) er entydig: Ett tydelig neste steg konverterer; en komité av CTA-er skaper stillstand.

Den samme siden må også fungere på telefoner. Mange Fernwood-besøkende kommer fra annonser eller sitater fra assistenter på mobil. En primærhandling som bare finnes i en desktop-hero, eller som kollapser til en liten tekstlenke under et informasjonskapselvarsel, svikter overfor de som er mest klare til å handle.

Bestem den ene handlingen først

Før du begynner med designen, skriv én setning:

Denne siden finnes for at [målgruppe] skal [spesifikk handling].

Eksempler:

SidePrimærhandlingIkke primærhandlingen
PriserStart gratis prøveperiode«Snakk med salg» (sekundært), nyhetsbrev
Landingsside for referanserapportLast ned rapporten for 2026«Bestill en demo» (sekundært etter nedlasting)
Sammenligning med LedgerlyStart gratis prøveperiode«Les dokumentasjonen»
KarriereSe ledige stillinger / Søk«Følg oss på LinkedIn»

Hvis du ikke kan navngi én handling, har siden to oppgaver. Del den, eller nedprioriter den ene oppgaven så kraftig at en besøkende som bare ser på et øyeblikk, ikke kan forveksle den med hovedoppfordringen.

Landingssider som arver hele toppteksten fra nettstedet, mislykkes ofte her: Den globale navigasjonen tilbyr ti utganger ved siden av den eneste knappen som betyr noe.

Oppbygningen av en tydelig primær CTA

1. En etikett som sier hva som skjer

SvakSterk
Send innStart gratis prøveperiode
Les merLast ned referanserapporten om refusjon
Kom i gangOpprett Fernwood-kontoen din
Klikk herBestill en 20-minutters demo

Ta med resultatet og, når det er nyttig, forpliktelsen («gratis», «2 minutter», «ingen kort»).

2. Én dominerende visuell stil

Reserver den mest fremtredende knappestilen – fyll med høyest kontrast og størst størrelse – utelukkende for primærhandlingen. Sekundærhandlinger bruker omriss, tekstlenke eller en mer dempet farge. Hvis «Snakk med salg» og «Start gratis prøveperiode» har samme fylte grønne stil, har du ikke en primær CTA; du har to.

Mysetest: Gjør siden uskarp (eller gå et skritt bort fra skjermen). Primærhandlingen bør fortsatt være det første interaktive elementet du legger merke til.

3. Synlig på den første skjermen

Før besøkende blar, på både desktop- og mobilbredder, bør de se:

  1. Hva dette er (overskrift)
  2. Hvorfor det er viktig (én støttende linje)
  3. Primærhandlingen

Et heldekkende bilde med et slagord og ingen knapp består ikke denne testen. Informasjonskapselvarsler og chat-widgeter som dekker knappen, teller som det besøkende faktisk så.

4. Gjenta ved beslutningspunkter

På lange sider bør du plassere den samme primærhandlingen igjen etter dokumentasjon, etter priser og nær slutten. Besøkende som blir overbevist på skjerm fire, bør ikke måtte lete seg tilbake til skjerm én.

Mønstre som fungerer:

  • Innebygd knapp etter sammenligningstabellen
  • CTA ved slutten av en seksjon som har nøyaktig samme etikett som hero-elementet
  • Beskjeden fastsatt linje på mobil (én handling, ikke et verktøyfelt med fem)

Ikke endre etiketten midt på siden («Start gratis» i hero-elementet, «Kjøp nå» i bunnteksten) med mindre tilbudet faktisk har endret seg – og hvis det har det, er siden forvirrende.

5. Tilpass mobiloverbevisningen, ikke bare mobiloppsettet

Responsiv CSS er ikke nok. Sjekk de gjengitte telefonskjermene: Er tilbudet fortsatt over folden? Er knappen lett å nå med tommelen og stor nok? Ble dokumentasjonen skjøvet under tre skjermer med annet innhold? Paritet i overbevisning er like viktig som paritet i layout.

Eksempel: Fernwoods prisside

Før: Hero-teksten sier «Utgiftsstyring som skalerer». Tre like knapper: «Bestill demo», «Kontakt salg», «Start prøveperiode». Pristabellene ligger to skjermer lenger ned uten noen knapp. En fastsatt linje på mobil fremhever et webinar.

Etter:

  • Hero: «Utgiftsstyring for økonomiteam i mellomstore arbeidsområder» + «Start gratis prøveperiode – ikke noe kort kreves»
  • Én fylt primærknapp: Start gratis prøveperiode
  • Sekundær tekstlenke: «Bestill heller en demo»
  • Den samme knappen Start gratis prøveperiode under hver plan og etter spørsmål og svar
  • Fast linje på mobil: bare Start gratis prøveperiode
  • Webinaret nedprioriteres til nyhetsbrevet i bunnteksten

Siden har nå én oppgave. Sekundære veier finnes fortsatt; de konkurrerer ikke lenger.

Vanlige feilmønstre

  • Designsystemdemokrati – hver knappvariant brukes én gang på siden, slik at ingenting er primært.
  • Hero-teater – vakre bilder, CTA-en på den andre skjermen.
  • Målforskyvning – et blogginnlegg som presenterer en rapport, med en knapp som sier «Snakk med salg».
  • Navigasjonslekkasje – betalt landingsside med full megameny.
  • Skjematisk overraskelse – knappen sier «Få veiledningen», men et klikk åpner et skjema med sju felt der «Bedriftsstørrelse» er obligatorisk. Tilpass innsatsen til etiketten.

Relatert

Sist oppdatert

Var denne siden nyttig?