UX-praxis: 8 solida Tips om CTA-knappdesign

användargränssnitt består vanligtvis av många olika element. Var och en av dem spelar en viktig roll för effektiviteten i användarupplevelsen samt omvandlingsfrekvenser för webbplatser och applikationer. Även de små komponenterna som knappar kräver mycket uppmärksamhet så att de kan uppfylla de mål och mål de förväntas uppnå. Idag fortsätter vi ämnet call-to-action-knappdesign och delar några praktiska tips som hjälper designers att skapa tillräckliga CTA.

Vad är CTA-knapp?

en call-to-action (CTA) – knapp är ett interaktivt gränssnittselement både webb och mobil. Dess huvudsyfte är att få människor att vidta vissa åtgärder som presenterar en konvertering för en viss sida eller skärm, till exempel köp, kontakt, prenumerera etc.

Lead generation och purchase rise är de grundläggande affärsmålen som Call-to-action kan skapas för. När en knapp design är övertygande nog att omedelbart fånga uppmärksamheten hos potentiella kunder, kan det locka dem att klicka och gå till nästa steg som att fylla en kort kontaktformulär eller göra en förbeställning av en produkt.

i vår artikel kräver uppmärksamhet. Kraftfull CTA-knappdesign, vi beskrev de viktiga aspekterna av en effektiv CTA-knappdesign som är storlek, färg, form, placering och mikrokopi. När alla egenskaper är utarbetade på lämpligt sätt har CTA-knappen mycket högre chanser att uppfylla sina uppgifter.

men hur man gör dessa aspekter kraftfulla? Här är några praktiska tips för att skapa en tillräcklig CTA-knappdesign.

cta_buttons_design tips tubik blogg

cta_buttons_design tips tubik blogg

Tips 1. Gör knappar ser klickbara

en tidigare uppgift för någon CTA är att få användare att klicka på den, så deras design bör sammanfalla med målet. Med hjälp av en produkt vill folk inte ta reda på vilka av designelementen som är interaktiva. Det är därför det är viktigt att se till att alla interaktiva element visas klickbara.

vad kan få en knapp att se klickbar ut? Först och främst är det en visuell presentation. En knapp kan verka mer klickbar när designers lägger till lite 3D-effekt på den. Till exempel ger en CTA med en liten lutning eller en liten skugga vanligtvis önskan att trycka på en knapp eftersom den ser mer framträdande ut. Om en knapp med 3D-effekt inte passar den valda stilen, till exempel platt design, kan klickbarheten betonas via rundade kanter på en knapp.

tubik foto app interaktioner

tubik foto app interaktioner

Tips 2. Välj den större storleken

storlek är ett av de vanligaste verktygen som hjälper till att ordna UI-komponenter enligt deras betydelse. Ju större ett element är desto mer märkbart blir det. Eftersom CTAs tidigare mål är att dra användarnas uppmärksamhet försöker designers vanligtvis att få dem att sticka ut bland de andra knapparna på skärmen, särskilt via märkbar storlek.

stora knappar har stora chanser att märkas och klickas fortfarande måste du hålla vissa gränser. En övertygande uppmaningsknapp är vanligtvis tillräckligt stor för att snabbt hittas men inte för stor så att den visuella kompositionen och hierarkin i layouten inte skulle bli bortskämd. Marknadsledare ger ofta rekommendationer om effektiva storlekar på knappar i sina riktlinjer. Till exempel säger Apple att cta i mobilgränssnittet ska vara minst 44 OC 44 pixlar, medan Microsoft rekommenderar 34 OC 26 pixlar.

Tips 3. Applicera kontrasterande färger

färgval beror på olika aspekter som gör processen mer komplicerad. Designers måste överväga sådana faktorer som kompositionens grundläggande färg samt potentiella preferenser och psykologiska särdrag hos målgruppen.

det finns ett villkor som är viktigt att tänka på när du väljer färger för CTA: knappar och bakgrundsfärger bör vara tillräckligt kontrasterande så att cta skulle sticka ut från de andra GRÄNSSNITTSKOMPONENTERNA. Till exempel, om en designer använder den blå färgpaletten för layouten, skulle det vara bra att använda röd eller gul färg för CTA-knappar.

 val av färg i UI-design

val av färg i UI design

Tips 4. Mer nödvändigt, färre ord

CTA microcopy är faktiskt ett samtal som berättar för användarna vilken åtgärd de kommer att vidta om de klickar på knappen. Den kraftfulla CTA-mikrokopian måste fånga användarnas uppmärksamhet snabbt och leda dem direkt till åtgärden.

för att göra en effektiv uppmaning måste du hålla antalet ord på ett minimum. Några lämpligt valda ord fungerar mycket snabbare än en lång beskrivande fras. Dessutom, genom att tillämpa det nödvändiga fallet i CTA-mikrokopi, ger du starka och direkta instruktioner om vad användare kan göra nästa.

burger app ui animation tubik

burger app ui animation tubik

Tips 5. Håll användarflödet i åtanke

stor storlek och ljusa färger är effektiva verktyg för att fånga användarnas uppmärksamhet, men den smarta placeringen kan öka chanserna för att cta ska märkas ännu mer. Användarflöde, även känt som användarresa, är en väg som användare följer i en digital produkt för att slutföra en viss uppgift, till exempel ett online-köp. Users flow hjälper till att skapa UX på det sättet så att människor kan gå steg för steg till sitt mål att ta emot data gradvis.

med tanke på användarresan kan du välja effektiv placering för CTA-knappar. Om du till exempel skapar en målsidesdesign måste du se till att användarna hittar CTA-knappen ”Registrera dig” efter att de läst informationen om erbjudandet eller tjänsterna. På så sätt kommer användarna att förstå vad de registrerar sig och om de behöver det. Om människor ser en sådan CTA-knapp innan de läser informationen finns det stora chanser att de bara ignorerar den.

bokningstjänst ui tubik

bokningstjänst ui tubik

Tips 6. Använd vitt utrymme som ett verktyg

vitt utrymme, även känt som negativt utrymme, är området mellan element i designkompositionen. Människor är vanligtvis inte medvetna om rymdens stora roll, men designers måste ägna mycket uppmärksamhet åt det.

vitt utrymme är inte bara en bakgrund av en visuell komposition. Det används ofta som ett kraftfullt verktyg som hjälper till att betona gränssnittselement. Om ett användargränssnitt innehåller många visuella komponenter kan en CTA-knapp Gå vilse på en sida eller skärm. Rätt mängd vitt utrymme runt en knapp hjälper till att dra användarnas uppmärksamhet när det blir mer märkbart.

dessutom anger blanksteg anslutningen mellan UI-element. Ju mindre vitt utrymme mellan komponenterna desto mer anslutna är de. Så om det finns några element som kan stödja uppmaningen, till exempel artikelbeskrivning eller foto, försök att minska utrymmet mellan dem och knappen för att ge en dubbel effekt på användarnas åtgärder.

webbgränssnitt design målsida

webbgränssnitt design målsida

Tips 7. Lägg till lite extra information

som vi sa ovan är det viktigt att hålla CTA-meddelandet kort så att det snabbt kan fånga uppmärksamheten. Men när publiken märker uppmaningen kan det vara användbart att ge ytterligare data också. Det kan vara en liten bit information som förklarar något om nästa steg. Du kan till exempel klargöra att registreringsprocessen inte tar mer än 15 sekunder eller påminna om att registreringen är gratis. En liten anmärkning kan öka användarnas intresse och uppmuntra dem att vidta åtgärder.

Tips 8. Kör konstant testning

om du vill se till att något fungerar bra måste du testa det. Denna gyllene regel är ett måste i olika områden, inklusive UI design. Användarforskning och analys hjälper designers att definiera målgruppens detaljer, men det skulle vara svårt att veta exakt om designbeslut är bäst. Därför kan tester bli en tillräcklig lösning som hjälper till att skingra tvivel.

en av de mest effektiva CTA-testmetoderna är A/B-testning. Den jämför två versioner av en digital produkt för att ta reda på vilken som fungerar bättre. Ett kreativt team delar användare i två grupper och var och en av dem visas olika varianter. En halv ser en version, den andra-B. Ett sådant tillvägagångssätt bidrar till att bestämma en mer lönsam lösning.

skillnaderna mellan A-och B-alternativ varierar från den minsta till den signifikanta. Till exempel, när det gäller CTA-knappar, kan designers ändra placering, storlek, färg eller mikrokopi. För att få mer exakta resultat rekommenderas att du testar en aspekt per gång, till exempel bara färgen på en knapp. På så sätt kan du skilja vilken faktor som gör skillnad.

gränssnittstestning UI design tubik

gränssnittstestning UI design tubik

effektiviteten kan mätas med olika kriterier som klick, antal prenumerationer eller försäljningsledningar. Valet av mätvärden beror på målen för ett företag eller ett kreativt team har etablerat. I vissa fall kan det vara bra att kombinera några mätvärden under enstaka tester för att uppnå djupare insikter i varje aspekt. Du kan till exempel testa en knappfärg som mäter antalet klick och prenumerationer.

A/B-testning är ett tillvägagångssätt som hjälper till att göra designändringar noggrant så att användarna inte skulle känna sig obekväma. Designers kan samla in nödvändiga data och mätvärden medan människor fortsätter att använda en app eller webbplats.

backar webbdesign animation

sluttningar webbdesign animation

för att göra en kraftfull call-to-action-knapp, designers måste fokusera på de mål som står bakom den. En CTA med lämplig storlek, färg och placering drar snabbt användarnas intresse och tillräcklig mikroskopi uppmuntrar dem att vidta önskad åtgärd.

Rekommenderad läsning

Ring för uppmärksamhet. Kraftfull CTA knappar Design

UI / UX Design ordlista. Navigeringselement

UX design ordlista: Gränssnittsnavigeringselement. Ställ in 2

7 Tips för att förbättra mobila interaktioner

3C av gränssnittsdesign: färg, kontrast, innehåll

9 effektiva Tips om visuell hierarki

ta det lugnt: Tips för Ansträngningsbesparande användargränssnitt

ljusa färger i UI-Design: starka och svaga sidor

välkommen att se mönster av Tubik på Dribbble och Behance

Lämna ett svar

Din e-postadress kommer inte publiceras.