8 solide tip til CTA-knapdesign

brugergrænseflader består normalt af mange forskellige elementer. Hver af dem spiller en væsentlig rolle i effektiviteten af brugeroplevelsen samt konverteringsfrekvenser af hjemmesider og applikationer. Selv de små komponenter som knapper kræver meget opmærksomhed, så de kan opfylde de mål og mål, de forventes at nå. I dag fortsætter vi emnet call-to-action-knapdesign og deler nogle praktiske tip, der hjælper designere med at skabe tilstrækkelige CTA ‘ er.

hvad er CTA-knap?

en call-to-action-knap (CTA) er et interaktivt UI-element både på nettet og på mobilen. Dets vigtigste mål er at få folk til at tage visse handlinger, der præsenterer en konvertering for en bestemt side eller skærm, for eksempel, køb, kontakt, abonnere, etc.

leadgenerering og købsstigning er de grundlæggende forretningsmål, som Call-to-action kan oprettes til. Når et knapdesign er overbevisende nok til straks at tiltrække potentielle kunders opmærksomhed, kan det lokke dem til at klikke og gå til næste trin, såsom at udfylde en kort kontaktformular eller foretage en forudbestilling af et produkt.

i vores artikel Ring for opmærksomhed. Kraftfuld CTA knap Design, vi beskrev de vitale aspekter af en effektiv CTA knap design, som er størrelse, farve, form, placering og mikrokopi. Når alle egenskaber er udarbejdet korrekt, har CTA-knappen meget større chancer for at udføre sine opgaver.

men hvordan gør man disse aspekter magtfulde? Her er nogle praktiske tips om at skabe en tilstrækkelig CTA knap design.

cta_buttons_design tips tubik blog

cta_buttons_design tips tubik blog

Tip 1. Få knapper til at se klikbare

en tidligere opgave for enhver CTA er at få brugerne til at klikke på den, så deres design skal falde sammen med målet. Brug af et produkt folk ønsker ikke at finde ud af, hvilke af designelementerne der er interaktive. Derfor er det vigtigt at sikre, at alle de interaktive elementer vises klikbare.

Hvad kan få en knap til at se klikbar ud? Først og fremmest er det en visuel præsentation. En knap kan virke mere klikbar, når designere tilføjer noget 3d-effekt til det. For eksempel bringer en CTA med en let gradient eller en lille skygge normalt ønsket om at trykke på en knap, da den ser mere fremtrædende ud. Hvis en knap med en 3D-effekt ikke passer til den valgte stil, for eksempel fladt design, kan klikbarhed fremhæves via afrundede kanter på en knap.

tubik foto app interaktioner

tubik foto app interaktioner

Tip 2. Vælg den større størrelse

størrelse er et af de mest almindelige værktøjer, der hjælper med at arrangere UI-komponenter efter deres betydning. Jo større et element er, jo mere mærkbart bliver det. Da CTAs ‘ tidligere mål er at henlede brugernes opmærksomhed, prøver designere normalt at få dem til at skille sig ud blandt de andre knapper på skærmen, især via mærkbar størrelse.

store knapper har store chancer for at blive bemærket og klikket stadig skal du holde nogle grænser. En overbevisende opfordring til handling-knap er normalt stor nok til hurtigt at blive fundet, men ikke for stor, så layoutets visuelle sammensætning og hierarki ikke ville blive forkælet. Markedsledere giver ofte anbefalinger om de effektive størrelser af knapper i deres retningslinjer. For eksempel, Apple siger, at CTA ‘ er i mobile UI skal være mindst 44 LP44, mens Microsoft anbefaler 34 lp26 lp.

Tip 3. Anvend kontrasterende farver

farvevalg afhænger af forskellige aspekter, der gør processen mere kompliceret. Designere skal overveje faktorer som kompositionens grundfarve samt potentielle præferencer og psykologiske egenskaber hos målgruppen.

der er en betingelse, der er afgørende at huske på, mens du vælger farver til CTA: knapper og baggrundsfarver skal være kontrasterende nok, så CTA ‘ er skiller sig ud fra de andre UI-komponenter. For eksempel, hvis en designer bruger den blå farvepalet til layoutet, ville det være en god ide at bruge rød eller gul farve til CTA-knapper.

 valg af farve i UI design

valg af farve i UI design

Tip 4. Mere bydende nødvendigt, færre ord

CTA-mikroskopi er faktisk et opkald, der fortæller brugerne, hvilken handling de vil tage, hvis de klikker på knappen. Den kraftfulde CTA-mikroskopi skal hurtigt fange brugernes opmærksomhed og føre dem lige til handlingen.

for at foretage en effektiv opfordring til handling skal du holde antallet af ord på et minimum. Et par passende valgte ord fungerer meget hurtigere end en lang beskrivende sætning. Derudover giver du stærke og direkte instruktioner om, hvad brugerne kan gøre næste gang ved at anvende det imperative tilfælde i CTA-mikroskopi.

burger app ui animation tubik

burger app ui animation tubik

Tip 5. Husk brugerstrømmen

stor størrelse og lyse farver er effektive værktøjer til at fange brugernes opmærksomhed, men den smarte placering kan øge chancerne for, at CTA’ er bliver bemærket endnu mere. Brugerstrøm, også kendt som brugerrejse, er en sti, som brugerne følger i et digitalt produkt for at udføre en bestemt opgave, for eksempel et online køb. Brugerstrøm hjælper med at oprette bruger på den måde, så folk kan gå trin for trin til deres mål at modtage dataene gradvist.

hvis du holder brugerrejsen i tankerne, kan du vælge effektiv placering for CTA-knapper. For eksempel skal du oprette et destinationssidedesign for at sikre, at brugerne finder “Tilmeld” CTA-knappen, når de har læst oplysningerne om tilbuddet eller Tjenesterne. På denne måde får brugerne en forståelse af, hvad de tilmelder sig, og om de har brug for det. Hvis folk ser en sådan CTA-knap, før de læser oplysningerne, er der store chancer for, at de bare vil ignorere det.

 booking service ui tubik

booking service ui tubik

Tip 6. Brug hvidt rum som et værktøj

hvidt rum, også kendt som negativt rum, er området mellem elementer i designkomposition. Folk er normalt ikke opmærksomme på rumets store rolle, men designere skal være meget opmærksomme på det.

hvidt rum er ikke kun en baggrund for en visuel sammensætning. Det anvendes ofte som et kraftfuldt værktøj, der hjælper med at understrege UI-elementer. Hvis en brugergrænseflade indeholder mange visuelle komponenter, kan en CTA-knap gå tabt på en side eller skærm. Den rigtige mængde hvidt rum omkring en knap hjælper med at henlede brugernes opmærksomhed, da det bliver mere synligt.

derudover indstiller hvidt mellemrum forbindelsen mellem UI-elementer. Jo mindre hvidt mellemrum mellem komponenterne er, jo mere forbundet er de. Så hvis der er nogle elementer, der kan understøtte opfordringen til handling, for eksempel varebeskrivelse eller foto, skal du prøve at reducere mellemrummet mellem dem og knappen for at give en dobbelt effekt på brugernes handlinger.

hjemmeside ui design landing page

hjemmeside ui design destinationsside

Tip 7. Tilføj nogle ekstra oplysninger

som vi sagde ovenfor, er det vigtigt at holde CTA-meddelelsen kort, så den hurtigt kan fange opmærksomheden. Men når publikum bemærker opfordringen til handling, kan det også være nyttigt at give nogle yderligere data. Det kan være et lille stykke information, der forklarer noget om de næste faser. For eksempel kan du præcisere, at tilmeldingsprocessen ikke tager mere end 15 sekunder eller minde om, at registrering er gratis. En lille bemærkning kan øge brugernes interesse og tilskynde dem til at handle.

Tip 8. Kør konstant test

hvis du vil sikre dig, at noget fungerer godt, skal du teste det. Denne gyldne regel er et must i forskellige områder, herunder UI design. Brugerforskning og analyse hjælper designere med at definere målgruppens specifikationer, men det ville være svært at vide præcist, om designbeslutninger er de bedste. Derfor kan Test blive en tilstrækkelig løsning, der hjælper med at fjerne tvivl.

en af de mest effektive CTA-testmetoder er A / B-test. Det sammenligner to versioner af et digitalt produkt for at finde ud af, hvilken der fungerer bedre. Et kreativt team opdeler brugere i to grupper, og hver af dem vises forskellige varianter. Den ene halvdel ser en version, den anden-B. en sådan tilgang hjælper med at bestemme en mere rentabel løsning.

forskellene mellem A-og B-indstillinger varierer fra den mindste til den signifikante. For eksempel i tilfælde af CTA-knapper kan designere ændre deres placering, størrelse, farve eller mikrokopi. For at få mere nøjagtige resultater anbefales det at teste et aspekt pr. På denne måde vil du være i stand til at skelne, hvilken faktor der gør forskellen.

grænseflade test UI design tubik

grænseflade test UI design tubik

effektiviteten kan måles ved forskellige kriterier såsom klik, antal abonnementer, eller salg-kundeemner. Valget af målinger afhænger af målene for en virksomhed eller et kreativt team har etableret. I nogle tilfælde kan det være godt at kombinere et par målinger under enkelt test for at opnå dybere indsigt i hvert aspekt. For eksempel kan du teste en farve på knappen, der måler antallet af klik og abonnementer.

A/B-test er en tilgang, der hjælper med at foretage designændringer omhyggeligt, så brugerne ikke føler sig ubelejlige. Designere kan indsamle de nødvendige data og målinger, mens folk fortsætter med at bruge en app eller hjemmeside.

skråninger hjemmeside design animation

skråninger hjemmeside design animation

for at gøre en kraftfuld opfordring til handling knap, designere nødt til at fokusere på de mål, der står bag det. En CTA med en passende størrelse, farve og placering trækker hurtigt brugernes interesse, og tilstrækkelig mikrokopi opfordrer dem til at tage den ønskede handling.

Anbefalet læsning

Ring for opmærksomhed. Kraftfuld CTA knapper Design

UI/UK design ordliste. Navigation Elements

design ordliste: Interface Navigation Elements. Sæt 2

7 tip til forbedring af Mobile interaktioner

3c af Interface Design: farve, kontrast, indhold

9 effektive tip til visuelt hierarki

tag det roligt: Tips til Indsatsbesparende brugergrænseflader

lyse farver i UI-Design: stærke og svage sider

velkommen til at se designs af Tubik på Dribbble og Behance

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.