3

How to Design Striking CTA

 2 years ago
source link: https://blog.prototypr.io/how-to-design-striking-cta-8987b5b14951
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

UI/UX Tips

How to Design Striking CTA

Actionable do’s and don’ts to help improve your call to action.

This article is brought to you by Buninux.com.
Visit our digital asset store to level up your design inventory.

1*aR9TFozzaPj0XNFW9g_plA.jpeg?q=20
how-to-design-striking-cta-8987b5b14951
Original post — buninux.com/learn/how-to-design-striking-cta

Intro

First of all, what is a CTA Button? Call-to-action (CTA) are the buttons that are meant to guide users towards your goal conversion. It’s a fundamental part of your interface that users need to press to make the action you want them to take.

CTA buttons can vary in style and size depending on your goal. Some common examples of call-to-action buttons are:

  • Add to cart button
  • Sign in/Register button
  • Download button

All CTA buttons have a goal: to get your app or page visitor to click and convert.

So here are my set of tips to help you create better call-to-actions and increase your design conversion rate.

Use valuable and actionable copy

Don’t use “submit” or “send” on your form buttons. Instead, provide a copy that speaks the same language as the user does.

Instantly show users what they will achieve by pressing your button.

Use valuable and actionable copy
Use valuable and actionable copy

Make your CTA’s dead obvious

Use bold, highly contrasting colors for your CTA’s.

Don’t try to blend/mix your primary converting buttons alongside other UI elements or backgrounds.

Make your CTA’s dead obvious
Make your CTA’s dead obvious

Ensure your CTA’s have a large tap zone

Don’t make your conversion buttons too small. Do make them prominent and bold.

When working on a web project, it’s a must to use a set of buttons for different resolution breakpoints.

Ensure your CTA’s have a large tap zone
Ensure your CTA’s have a large tap zone

Don’t be afraid to add some spice

Don’t make your buttons look boring. Instead, use both style and interaction to build the urge to smash that pretty & fun thing.

Don’t be afraid to add some spice
Don’t be afraid to add some spice

Don’t be afraid to add some spice

Ensure your CTA’s vocabulary is clear and actionable.

User attention is precious, so use the momentum to quickly get to the main point with a short but striking copy.

Don’t be afraid to add some spice
Don’t be afraid to add some spice

Therefore, it’s crucial to be open to longer text variations when designing your buttons. Just make sure the action behind the text is 100% predictable.

Add keywords to CTA’s

Images that act as buttons, like product cards, must have “alt” tags attached to rank your page higher and provide information to people with visual disabilities.

Make sure that all clickable elements have <alt> tags included.

Add keywords to CTA’s
Add keywords to CTA’s

Use Me instead of You

Based on the research by Unbounce, first-person copy like “I” and “my” is more effective than using “you” and “your,” resulting in higher conversion.

It said using this trick can help people make the decision. Because our emotions primarily drive buying/clicking patterns. And, using first-person pronouns in your CTA’s increases these feelings by assisting visitors in seeing a personal benefit better.

Based on my experience, using this trick and a friendlier tone results in a better response from my visitors. :)

Love you btw ❤

Use Me instead of You
Use Me instead of You

Use descriptive buttons

Add descriptions to promote the idea of pressing your button.

Put extra proof, rating, or your product best feature to create anticipation towards clicking and achieving something.

Use descriptive buttons
Use descriptive buttons

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK