사람들이 클릭하게 만드는 버튼에 대한 9가지 중요한 CTA 디자인 팁

클릭 유도문안(CTA)은 마케팅 전략의 절정입니다. 구매, 가입 또는 다운로드를 요청하는지 여부. 지금까지 모든 것은 잠재 고객을 방문 페이지로 유도하는 것이었습니다. 그리고 때때로, 당신은 거래를 성사시키기 위해 단지 몇 마디밖에 할 수 없습니다.

이것이 바로 CTA 버튼이 사이트의 가장 중요한 디자인 요소인 이유입니다. 수동적인 방문자를 능동적인 사용자로 만들 수 있기 때문입니다.

클릭 유도문안 버튼은 단순해 보입니다. 하지만 그것들은 엉망이 되기 쉽습니다. 아니면 완전히 놓칠 수도 있습니다. 이 9가지 CTA 디자인 팁을 통해 이러한 전환을 얻을 수 있습니다. 또한 많은 유용한 예:

1. 버튼을 클릭할 수 있게 만들기
2. 귀하의 사본을 설명하십시오
3. 크기와 공간을 적절하게
4. 1인칭으로 ​​연결
5. 긴급성을 만들고 강한 동사를 사용하십시오
6. 부제목을 사용해보십시오
7. A/B 테스트 변형
8. 모바일 버전에 주목

클릭할 수 있는 CTA 버튼 만들기

버튼을 '클릭 가능한' 모양으로 만드는 것은 어리석게 들립니다. 그러나 사이트에서 얼마나 자주 오류가 발생하는지 믿지 않을 것입니다. 그리고 그것은 대부분 버튼의 윤곽과 색상과 관련이 있습니다.

전환율 추세는 왔다가 사라집니다. 얇은 테두리와 배경색으로 희미해지는 텍스트가 있는 투명한 "고스트 버튼"과 같습니다. 그들은 멋져 보일 수 있지만 덜 관심을 끄는 경향이 있습니다. 효과적인 CTA가 해야 할 일의 반대입니다.

이 디자인이 일반적으로 작동하는 유일한 시간은 보조 버튼입니다.

출처: UX 무브먼트

다음은 분명히 클릭할 수 없는 CTA 버튼의 또 다른 예입니다. 물론입니다. 이 디자인 에이전시의 랜딩 페이지는 멋지게 보입니다. 하지만 이 사례 연구를 지나치면 용서받을 수 있습니다.

그렇다면 사람들이 클릭하게 만드는 방법은 무엇입니까? 전환율을 높이려면 버튼은 크고 굵고 선택한 색 구성표와 함께 작동해야 합니다.

Netflix는 사용자의 관심을 끌기 위해 고유한 빨간색을 사용합니다. 거의 정지 신호처럼:

대비되는 색을 내기에도 효과가 있어 눈에 띕니다. 전자 상거래 플랫폼 BigCommerce가 여기에서 한 것처럼:

이것은 상자의 텍스트에도 적용됩니다. 제대로 읽을 수 있도록 대조되는지 확인하십시오.

그라디언트는 동일한 브랜드 색 구성표 내에서도 작동할 수 있습니다. 그들은 사물에 현대적이고 더 젊은 느낌을 줍니다.

출처: 월요일

여기서 제 조언은 CTA 디자인을 명확하게 유지하려고 노력하는 것입니다. 기본적으로 뭔가를 하는 것은 좋은 생각처럼 들릴지 모르지만 인간은 습관의 동물입니다. 그리고 당신은 얼마나 많은 사람들이 요점을 놓칠 것인지에 놀랄 것입니다.

귀하의 사본과 함께 설명하십시오

가장 간단한 전환율 최적화(CRO) 전술 중 하나는 훌륭한 카피라이팅입니다. 그러나 큰 덩어리의 텍스트만 있는 것은 아닙니다. 현미경도 마찬가지로 중요하며 더 작은 세부 사항을 다룹니다.

일반적으로 연락처 양식 및 소셜 미디어 상태 업데이트 표시줄에서 볼 수 있습니다. Facebook의 유명한 "What's on your mind?"처럼 또는 LinkedIn의 "게시물 시작하기".

현미경 검사는 다음을 도울 수 있습니다.

• 사용자에게 수행할 작업을 알려줍니다.
• 의견을 내세요
• 우려 사항 해결
• 컨텍스트 제공

CTA 버튼 카피는 또 다른 예입니다. 그리고 사람들에게 그들이 무엇을 얻을 것인지/클릭했을 때 무슨 일이 일어날 것인지 정확하게 알려야 합니다.

이것은 IMPACT의 CTA 버튼이었습니다. "무료 다운로드". 그다지 상상력이 풍부하지 않습니까?

출처: 임팩트

그러나 좀 더 구체적으로 설명함으로써 전환율이 78.5% 증가했습니다. "더 많은 고객을 유치하는 방법을 알려주세요."가 더 명확하게 호소했습니다.

그냥 "여기를 클릭하세요"라고 쓰고 싶을 정도입니다. 그러나 사용자를 참여시키고 원하는 행동에 영감을 줄 수 있는 대안이 너무 많습니다.

그럼 무엇 을 써야 할까요? 먼저 전환 의도를 식별해야 합니다. 사용자가 유입경로에 있는 위치와 사용자가 어디에서 왔는지(트래픽 소스) 정렬하려고 합니다.

출처: 클라이언트 부스트

그런 다음 제공하는 것의 가치를 강조해야 합니다. 그리고 모든 이의 제기를 처리합니다.

출처: 마케팅 사례

참 독특한 과정입니다. 그리고 그것은 당신의 틈새 시장과 브랜드 보이스에 달려 있습니다. 그러나 어떤 문구를 선택하든 버튼 텍스트를 짧고 요점으로 유지하는 것을 잊지 마십시오.

적절한 크기 및 공백 사용

CTA 버튼 디자인은 색상 그 이상입니다. 버튼 크기는 클릭률에 실제로 영향을 줄 수 있는 또 다른 작은 세부 사항입니다. 그리고 공백은 텍스트 자체만큼 중요합니다.

이 중 많은 부분이 웹 디자인에 따라 달라집니다. 음수(흰색) 공백은 페이지의 특정 요소에 주의를 집중시킵니다. 당신은 어수선한 홈페이지를 원하지 않습니다. 방문자가 따라갈 수 있는 명확한 경로가 있어야 합니다.

에어비앤비는 네거티브 스페이스가 제대로 된 가장 좋은 예 중 하나입니다. 그리고 대비되는 색상으로 더 명확하게:

Buffer는 홈페이지에 더 많은 정보가 있지만 여전히 CTA 버튼을 기본 사본에 가깝게 유지합니다. 또한 고스트 버튼을 효과적으로 사용하는 예. 이것은 다음에 해야 할 일을 매우 명확하게 합니다.

버튼이 클수록 더 눈에 띕니다. 그리고 주목을 끌기 위해 눈에 띄어야 합니다. 그러나 페이지를 장악하고 UX를 망칠 정도는 아닙니다.

편두통에 걸리기 쉽다면 지금 시선을 피하십시오. 다음은 수행하지 않는 방법의 예입니다.

출처: 저스틴마인드

여기 많은 요소가 버튼처럼 보입니다. 나는 이 사이트가 방문자가 무엇을 클릭하기를 원하는지 알고 있는지조차 확신하지 못합니다.

대조적으로 Spotify의 랜딩 페이지에서 가장 먼저 보이는 것은 무엇입니까?

거대한 "고 프리미엄"버튼, 맞습니까? 이것이 명확한 사용자 경로를 디자인하는 방법입니다.

마지막으로 좋은 예를 위한 CTA 디자인에 대해 알아차린 것이 있습니까? 조금만 더 들여다보면 이들의 공통점을 발견할 수 있을 것이다.

과학자들은 인간이 "날카로운 점과 대조적으로 완만한 곡선을 가진 모양"을 좋아한다는 것을 발견했습니다. 그들은 눈을 더 즐겁게 하고 우리를 더 평화롭게 만듭니다. 이 때문에 가장 효과적인 클릭 유도문안 버튼은 모서리가 둥근 직사각형입니다.

출처: 클레버탭

이유가 있는 가장 인기 있는 형식입니다. 그러나 다른 옵션을 시도하십시오. 청중은 다른 것을 선호할 수 있습니다.

1인칭으로 ​​연결

더 나은 CTA 디자인은 한 번의 조정으로 가능합니다. 때로는 한 마디.

카피 라이팅에서 우리는 "당신"이라는 단어를 사용하도록 배웁니다. 독자가 직접 이야기를 하고 있는 듯한 느낌을 주기 때문입니다. 그래서 버튼 카피에도 적용될 것 같죠? 이상하게도 그렇게 많지 않습니다.

Unbounce는 방문 페이지의 문구를 "30일 무료 평가판 시작 " 에서 "30일 무료 평가판 시작"으로 변경하면 클릭률이 90% 증가한다는 사실을 발견했습니다.

그래서, 왜? 누군가 제품에 연결되어 있다고 느낄 때 전환할 가능성이 더 큽니다. 그것은 그들에 대해 아무것도 알지 않고도 그 개인적인 접촉을 제공합니다.

마케팅 심리학에 따르면 구매 결정은 대부분 감정에 기초합니다. 따라서 웹 사이트 방문자가 자신의 선택이라고 느끼기를 원합니다.

"my"를 작성하면 사용자가 수행하려는 작업을 시각화하는 데 도움이 됩니다. 그것은 그들에게 통제력을 부여하고 (바라건대) 의사 결정을 내리도록 유도합니다.

또한 즉각적인 가치를 얻을 수 있음을 보여줄 수 있습니다. Crazy Egg 홈페이지에서 좋아요:

출처: 크레이지 에그

1-800 Contacts는 세계 최대의 콘택트렌즈 매장입니다. 하지만 그들은 똑같이 합니다. 그들은 CTA 버튼이 한 사람만을 대상으로 하는지 확인합니다.

출처: 1-800 연락처

이 기술을 사용하는 회사는 많지 않습니다. 그것은 당신이 그것을 볼 때 두드러진다는 것을 의미합니다. 그럼 시도해보지 않으시겠습니까?

긴박감을 조성하고 강한 동사를 사용하십시오.

귀하의 카피는 긴박감을 조성하고 사용자의 주의를 사로잡아야 합니다. 이것은 전자 상거래 비즈니스에 특히 효과적입니다. "지금" 및 "오늘"과 같은 단어를 사용하면 행동에 박차를 가하는 데 도움이 될 수 있습니다. 그들은 제안이 영원히 끝나지 않을 것이라고 제안하기 때문입니다.

"지금 구매"는 고전입니다. 그러나 우리는 CTA 디자인으로 그보다 더 잘 할 수 있습니다.

출처: 고스퀘어드

다음과 같은 표현을 시도해 볼 수 있습니다.

• “오늘 몸조심하세요”
• "지금 할인 잠금 해제"
• “일회성 무료 다운로드”

당신은 또한 당신의 제안을 매력적으로 만들고 호기심을 불러일으키기를 원합니다. 따라서 강력한 동사로 시작하십시오. 노력이 될 것 같은 일이 아니다. 그것은 사람들을 미루는 쉬운 방법입니다.

다음은 내가 의미하는 바에 대한 몇 가지 예입니다.

왼쪽은 사용자가 클릭하면 무언가를 얻을 수 있는 것처럼 들립니다. 오른쪽은 시간이나 돈을 포기 해야 할 것처럼 들립니다.

당신도 정말 창의력을 발휘할 수 있습니다. 이 버전의 Huemor 홈페이지 좋아요:

출처: FastCapital360

또는 신비로운 반전을 주는 Humboldt County의 오래된 방문 페이지:

출처: ConEmprendiiento

팀과 함께 아이디어를 브레인스토밍하세요. 아무리 우스꽝스럽더라도. 당신은 당신이 무엇을 생각해 내고 결국 사용하게 될지 놀랄 것입니다. 그러나 어떤 문구를 선택하든 반대편에서 약속을 이행하는 것을 잊지 마십시오.

클릭 유도문안 버튼 옆에 있는 부제목을 사용해 보세요.

때때로 사람들은 약간의 넛지가 필요합니다. 그리고 CTA 버튼 아래에 있는 약간의 텍스트로 트릭을 수행할 수 있습니다. 일반적인 "소제목"이 아닙니다. 그러나 그것을 설명하는 가장 쉬운 방법입니다.

버튼 텍스트를 제목으로 생각하면 가장 많이 표시되는 부제목은 "신용 카드 세부 정보 필요 없음"입니다. 그러나 당신은 무엇이든 말할 수 있습니다. 그리고 약간의 창의력을 발휘하는 것도 재미있습니다.

많은 경우 잠재 고객에게 신뢰를 주기 위해 사용됩니다. 그리고 사람들이 가질 수 있는 주요 문제점을 해결할 수 있습니다.

출처: CoSchedule

CoSchedule은 사용자가 무료 평가판일 뿐이라고 생각할 수 있음을 이해합니다. 그래서 왜 안돼? 영원히 무료입니다.”라고 설명합니다.

이를 사용하여 사회적 증거를 추가할 수도 있습니다.

출처: 베이스캠프

이것은 사용자가 이미 다른 사람들이 당신을 신뢰하고 있음을 분명히 볼 수 있기 때문에 당신에게 즉각적인 신뢰성을 제공합니다. 또한 사람들이 그렇게 많은 가입자에게 이유가 있을 것이라고 생각하기 때문에 FOMO에 영감을 줄 수 있습니다.

서비스와 함께 제공되는 특별 제안이나 추가 가치가 있는 경우 부제목을 사용하여 강조 표시하십시오.

출처: 모즈

마이크로카피는 브랜드 보이스를 빛낼 수 있는 기회입니다. 단 한 문장일지라도 말이다. 따라서 적합하다면 약간 건방진 것을 두려워하지 마십시오.

출처: 클라이언트 부스트

또한 사람들이 클릭한 후 어떤 일이 일어날지 구체적으로 설명할 수도 있습니다. 그들에게:

• 얻을 수 있는 것 (새로운 마케팅 아이디어)
• 몇 명(17세 이상)
• 그리고 그들이 관심을 가져야 하는 이유 (그들은 당신이 가진 것보다 낫습니다)

이러한 예를 영감을 위한 템플릿으로 사용하십시오. 아니면 완전히 다른 일을 하십시오. 브랜드 아이덴티티에 맞는지 확인하고 재미있게 즐기십시오.

A/B 테스트를 잊지 마세요

대부분의 CRO 도구는 사용자 경험(UX)을 개선하는 것을 목표로 합니다. 웹페이지의 주요 부분에서 이미 이 작업을 수행하고 있을 수 있습니다. 그러나 작은 요소로도 수행해야 합니다.

Amazon은 CTA 버튼 디자인에 대해 까다롭기로 악명이 높습니다. 특히 타사 사용과 함께. 따라서 규칙을 위반하지 않도록 하십시오.

그 후에는 버튼 디자인을 조금만 변경해도 큰 영향을 미칠 수 있습니다. 따라서 다양한 유형의 CTA 버튼을 비교하십시오. 그런 다음 A/B 테스트 변형:

• 버튼 색상
• CTA 카피
• 폰트
• 페이지 디자인에서의 배치
• 팝 업
• 문의 양식

출처: 스노프

앞서 논의한 바와 같이 때로는 한 단어만 변경해도 전환율이나 클릭률이 증가할 수 있습니다. 그러나 시작하기 전에 방문자가 사이트를 탐색하는 방법을 이해해야 합니다.

다음과 같은 사항을 알고 싶습니다.

1. 그들이 상호 작용하려는 요소
2. 그들이 어디에서 왔는지
3. 사이트의 사용자 여정/구매 유입경로
4. 그곳에 있는 사람들의 동기

출처: 지피

이 정보를 얻은 후에는 추측이 아닌 사실에 기반한 실험을 할 수 있습니다.

일반적으로 A 및 B 버전을 CTA 디자인과 비교하는 것이 더 쉽습니다. 그러나 이것을 늘리고 다변수 테스트를 시도할 수 있습니다. 일반적으로 처음에는 단순한 것이 더 좋습니다. 그렇게 하면 확실한 승자가 될 것입니다.

그러나 그 이후에 다른 버전에 대해 승자를 시험하는 것을 막을 수는 없습니다. 항상 테스트하고 비교해야 합니다. 작동하는 것을 발견한 경우에도 마찬가지입니다. 그것이 성공적인 브랜드가 하는 일입니다.

모바일 버전에 주목

끝내는 빠른 팁. 디자인 요소는 모바일 화면에서 매우 다르게 보입니다. 훨씬 더 작은 디스플레이와 더 적은 픽셀로 작업하고 있습니다. 따라서 혼란이 훨씬 쉬워집니다.

우리가 다룬 모든 내용은 모바일 버전에서 더욱 널리 사용됩니다. 대비되는 색상이 더 눈에 띄어야 합니다.

음수 공간이 우선되어야 합니다.

그리고 부제목도 다른 위치에 있을 수 있습니다. 모바일 사용자는 아래에서 볼 수 있을 만큼 아래로 스크롤하지 않을 수 있습니다.

해당 그래픽에 대해 CleverTap 에 찬사 를 보냅니다.

모바일에서 일반적으로 UX에 대해 더 많은 생각이 필요합니다. 모바일이 전 세계 검색 트래픽의 절반 이상을 차지하기 때문입니다. 데스크톱 버전이 번역될 것이라고 기대할 수 없습니다. 그리고 조금만 노력하면 훨씬 더 높은 클릭률을 얻을 수 있습니다.

결론

효과적인 CTA 디자인은 이러한 작은 세부 사항으로 구성됩니다. 나는 그것을 통해 여러 번 말했지만 가장 작은 조정이 필요한 전부일 수 있습니다. 윤곽선의 색상이나 모양과 같이 중요하지 않은 것까지도.

A/B 테스팅은 당신이 알 수 있는 유일한 방법입니다. 그리고 이를 수행하는 데 값비싼 CRO 도구도 필요하지 않습니다. 전환을 추적하기만 하면 됩니다. 변경합니다. 그리고 평소 수치에서 증가 또는 감소가 있는지 확인하십시오.

클릭 유도문안 버튼에 가치를 부여하세요. 그것은 새로운 고객이나 잃어버린 기회의 차이일 수 있습니다.

최근에 독창적인 CTA 디자인을 본 적이 있습니까? 전환수를 늘리는 작은 변화가 있습니까? 아래 의견에 알려주십시오.