CTA 디자인 – 큰 차이를 만드는 작은 디테일

게시 됨: 2023-01-19

CTA 디자인 – 큰 차이를 만드는 작은 디테일

당신은 훌륭한 아이디어를 브레인스토밍합니다. 당신은 그것에 대한 완벽한 디자인을 가지고 있습니다. 그리고 귀하의 광고는 올바른 고객의 관심을 끌 수 있습니다. 그러나 그들은 그것을 보고 광고를 클릭하지 않고 지나갑니다. 이거 좋아하세요? 당연히 아니! 그러나 고객이 광고를 무시한 이유는 무엇입니까? 컬러 팔레트였습니까 아니면 카피였습니까? 많은 이유를 생각할 수 있습니다. 하지만 CTA 디자인을 면밀히 조사했습니까? 아마 아닐 겁니다. 그것은 아마도 당신이 조사하는 마지막 일이지만 이상적으로는 첫 번째가 되어야 합니다!

예, 단순히 잘못 디자인되었거나 CTA가 약해서 완벽한 광고가 낭비되는 것을 원하지 않습니다. 사실 CTA가 목적을 달성하지 못한다면 '완벽한 광고'라고 할 수도 없습니다.

그러나 CTA에는 무엇이 있습니까? 대부분의 경우 "여기를 클릭하십시오" 또는 "자세히 알아보기"라는 간단한 메시지만 표시됩니다. 우리는 당신을 듣습니다. 그러나 믿거나 말거나, CTA 버튼의 위치부터 선택한 색상, 사용하는 카피, 그 안의 글꼴 스타일에 이르기까지 모든 것이 뷰어에 미치는 영향에 직간접적으로 영향을 미칠 수 있습니다. 많이 궁금하세요? 그럼 준비하세요. 우리는 오늘 CTA 디자인에 대한 모든 것을 이야기할 것입니다.

  • CTA 디자인 – 왜 중요한가요?
    • 1. CTA는 광고 목표를 명확하게 합니다.
    • 2. 고객의 의사 결정 지원
    • 3. 전환 개선에 도움
  • CTA 디자인: 클릭 가치를 높이는 팁
    • 1. 카피를 조금 수정하면 큰 효과를 볼 수 있습니다.
    • 2. CTA를 버튼처럼 보이게 만드세요
    • 3. CTA에 적합한 색상 선택
    • 4. CTA 디자인의 불투명도에 주의
    • 5. 여백을 활용하라
    • 6. CTA를 너무 많이 추가하지 마세요.
    • 7. 단, 방향이 여럿일 때는 일관성을 유지하라
  • Kimp로 클릭 가치가 있는 CTA 디자인 만들기

CTA 디자인 – 왜 중요한가요?

클릭 유도문안 또는 CTA는 광고의 핵심이 되어야 합니다. CTA가 대부분의 마케팅 그래픽에서 가장 중요한 구성 요소로 판명되는 몇 가지 이유를 살펴보겠습니다.

1. CTA는 광고 목표를 명확하게 합니다.

CTA를 정의하려면 광고의 목표가 무엇인지 알아야 합니다. 예를 들어 다양한 플랫폼의 모든 캠페인에 대해 고객이 웹사이트 홈페이지를 방문할 것으로 기대하지 않습니다. 이러한 광고 중 일부의 경우 고객이 앱을 다운로드하기를 원합니다. 일부는 향후 리드 육성 노력을 위해 연락처 세부 정보를 수집할 수 있도록 리드 캡처 페이지로 안내해야 합니다. 그리고 다른 사람들은 고객이 카트에 항목을 추가하고 가능한 한 빨리 구매할 수 있도록 고객을 판매 페이지나 제품 페이지로 안내해야 할 수도 있습니다.

따라서 CTA는 캠페인, 특정 광고 또는 마케팅 디자인에 대해 설정한 목표를 기반으로 의도한 방향으로 트래픽을 유도하는 데 도움이 됩니다.

2. 고객의 의사 결정 지원

고객은 자신이 찾고 있는 것이 무엇인지 알고 있지만 믿거나 말거나 대부분의 소비자는 구매 결정을 내리는 데 약간의 도움을 주셔서 감사합니다. 대부분의 광고, 랜딩 페이지 및 기타 마케팅 디자인에는 하나 또는 두 개의 CTA가 있습니다. 이메일에는 일련의 제품 카테고리 또는 쇼핑 가이드 이메일에 관한 것일 때 둘 이상이 있을 수 있습니다. 어느 쪽이든 CTA를 추가하면 고객이 결정 피로를 극복하고 보다 자신 있게 다음 단계로 진행할 수 있습니다.

3. 전환 개선에 도움

간혹 고객이 다음 단계를 모르기 때문에 리드 유입경로의 다음 단계로 진행하지 않는 경우가 있습니다. CTA를 추가하면 더 쉽게 이해할 수 있습니다.

이를 더 잘 이해하기 위해 예를 들어 보겠습니다. 아래 슬라이더가 Apple 웹 사이트에 나타납니다.

원천

좋아요, 그렇다면 루이 암스트롱의 블랙 앤 블루스는 어떻습니까? 고객이 Apple 웹 사이트에서 이 내용을 보는 이유는 무엇입니까? 아마도 하단의 Apple TV 로고는 이 다큐멘터리를 Apple TV에서 볼 수 있음을 알려줄 것입니다. 하지만 그래서? CTA "지금 스트리밍하기"가 아니었다면 위의 답변 대부분이 답변되지 않았을 것입니다. 혼란스러워하는 고객은 그냥 지나쳤을 수 있습니다. 그러나 CTA 버튼 덕분에 방문자는 이 버튼을 클릭하면 번거로움 없이 Apple TV의 스트리밍 페이지로 이동할 수 있습니다. 이것은 슬라이더를 클릭하도록 동기를 부여합니다. 거기에서 전환이 일어났습니다!

이는 전환을 발생시키는 가장 간단한 방법이 명확하고 이해하기 쉬운 CTA를 추가하는 것임을 보여주는 예입니다.

CTA가 디자인에서 중요하다는 사실을 확립했으므로 이제 몇 가지 CTA 디자인 팁에 대해 이야기해 보겠습니다.

CTA 디자인: 클릭 가치를 높이는 팁

CTA는 디자인에서 분명히 구별할 수 있는 세부 사항이어야 합니다. 그러나 동시에 앞에 나오는 필수 정보에서 고객의 주의를 분산시켜서는 안 됩니다. 시각적 요소, 문구 및 CTA는 함께 메시지를 명확하게 제시하고 고객에게 CTA를 클릭해야 하는 이유와 클릭했을 때 어떤 일이 발생하는지 알려야 합니다. 이 모든 일이 일어나기 위해 CTA가 디자인에 유리하도록 만드는 몇 가지 팁이 있습니다.

1. 카피를 조금 수정하면 큰 효과를 볼 수 있습니다.

광고 또는 웹 페이지의 헤드라인을 읽는 사용자의 90%가 CTA 카피도 읽는다는 사실을 알아야 합니다. 예, 사본이 중요합니다.

아래 CTA에서는 간단한 "다운로드" CTA로 충분했을 것입니다. 그러나 "무료"라는 단어를 추가하면 고객은 현재 아무 것도 지불하지 않지만 여전히 콘텐츠를 다운로드할 수 있음을 확신할 수 있습니다.

공백
원천

개인화된 CTA는 단순 CTA보다 202% 더 나은 성과를 내는 것으로 추정됩니다. 따라서 사본에 충분한 시간을 할애하십시오. 가장 설득력 있게 들리고 문맥과 가장 관련성이 높은 최고의 단어를 식별합니다.

개인화된 CTA는 고객이 버튼을 클릭할 때 어떤 일이 발생하는지 쉽게 알 수 있는 방법입니다. 예를 들어 아래 이메일에서 의상은 "자리 예약" 버튼을 클릭하면 예약 페이지로 이동한다는 것을 즉시 이해합니다. 따라서 그들은 진정으로 예약에 관심이 있거나 예약에 대해 더 알고 싶은 경우에만 클릭할 것입니다.

공백
Kimp의 이메일 디자인

따라서 개인화된 CTA가 있는 경우 진정으로 관심이 있는 리드만 깔때기 아래로 이동하도록 할 수 있습니다. 이들은 전환 가능성이 가장 높은 종류의 리드입니다. 그리고 그들이 리타게팅할 수 있는 일종의 리드라는 것을 알지 못한다면 말입니다.

Kimp 팁: CTA 문구가 가장 큰 효과를 발휘하려면 단순하고 읽기 쉬운 글꼴을 선택하세요. 멋진 글꼴과 장식적인 스타일을 피하십시오. 클릭 유도문안은 읽기 쉬워야 합니다.

너무 많은 서체를 사용하지 않고 올바른 글꼴을 결합하는 것이 부담스러운 작업처럼 느껴지시나요? 전문 디자이너 에게 맡기세요 .

2. CTA를 버튼처럼 보이게 만드세요

클릭 유도문안이 카피의 나머지 부분과 비슷하다면 고객이 클릭하여 다음 단계로 넘어갈 수 있다는 것을 어떻게 알 수 있을까요? 따라서 CTA가 나머지 사본과 다르게 보이도록 만드십시오.

CTA를 버튼처럼 보이게 만드는 것만큼 간단한 것이 클릭을 45%까지 크게 향상시킬 수 있습니다. 물론 나머지 디자인의 시각적 스타일과 브랜드의 시각적 정체성에 따라 필요에 따라 플랫 버튼 또는 스큐어모픽(3차원) 버튼을 항상 사용할 수 있습니다. 그러나 버튼으로 인식하기 쉬운 한 방문자가 클릭할 가능성이 더 높습니다.

3. CTA에 적합한 색상 선택

CTA 디자인의 색상을 변경하는 것만으로도 CTA의 모양과 효과가 크게 바뀔 수 있다는 사실을 알고 계셨습니까? 실제로 SAP는 주황색 CTA 버튼을 통해 전환율이 32.5% 증가했음을 확인했습니다.

물론 다른 색상이 귀하의 브랜드에 더 잘 어울릴 수도 있습니다. A/B 테스트를 통해 이를 파악할 수 있습니다. 이를 수행하는 한 가지 방법은 CTA를 제외한 모든 것을 유지하면서 동일한 디자인의 두 가지 다른 버전을 만드는 것입니다. 이 두 디자인에 서로 다른 색상의 CTA 디자인을 사용하고 어느 것이 더 잘 변환되는지 확인하십시오. 웹 페이지에서 아이디어를 테스트하는 경우 히트 맵 및 기타 추적 도구를 사용하여 방문자 행동을 이해하고 디자인을 추가로 조정할 수도 있습니다.

색상을 선택한 후에는 CTA가 배경에서 눈에 띄는지 확인하세요. CTA와 배경색은 같은 색을 사용할 수 없습니다. CTA 디자인의 색상과 배경 색상 및 전체 색상 팔레트 간에 상당한 대비가 있어야 합니다. 최고의 카피로 가장 잘 보이는 CTA 디자인이라도 CTA를 알아보기 쉽지 않다면 아무 소용이 없을 것입니다.

공백
Kimp의 웹 배너 디자인

위의 예에서 빨간색 CTA는 어두운 색상의 배경에서 두드러집니다. 따라서 사용자가 CTA를 인식하지 못할 위험이 없습니다.

킴프 팁: 색상과 색상 대비는 까다로운 방식으로 작동합니다. 때때로 최대 대비를 가진 색상을 함께 배치하면 시각적인 부담이 커질 수 있습니다. 색 구성표 및 대비되는 색상을 선택하는 방법에 대해 자세히 알아보려면 색상환 및 색 구성표에 대한 블로그를 확인하세요.

4. CTA 디자인의 불투명도에 주의

CTA 디자인을 알아보기 어려운 또 다른 이유는 CTA 디자인의 배경 패턴과 불투명도 때문일 수 있습니다. 투명하거나 반투명한 CTA는 혼잡한 배경에서 길을 잃을 수 있습니다. 이러한 경우 불투명 버튼은 CTA를 돋보이게 합니다. 또는 아래 디자인에서 CTA 주변의 하이라이트와 같은 미묘한 세부 사항을 추가할 수도 있습니다. 이와 같은 세부 사항은 CTA의 모양을 더욱 향상시키고 관심을 끕니다.

공백
Kimp의 웹 배너 디자인

디지털 캠페인을 위한 눈길을 끄는 배너를 만들고 싶습니까? 오늘 Kimp 팀 에 연락하십시오 .

5. 여백을 활용하라

CTA 주변에 여백을 추가하면 전환율이 약 230% 증가할 수 있습니다. 네거티브 공간을 효과적으로 사용하면 CTA 주변의 모든 혼란을 줄이고 주의를 집중시킬 수 있기 때문입니다.

공백
Kimp의 랜딩 페이지 디자인

위의 랜딩 페이지에서 CTA 아래의 모든 공간은 CTA를 쉽게 눈에 띄게 합니다. 시선을 사로잡는 CTA는 클릭 가능성이 가장 높은 것입니다. 따라서 고객이 페이지에 있는 CTA를 알아차리지 못해 떠나지 않도록 하려면 CTA 주변에 충분한 양의 여백을 추가하십시오.

6. CTA를 너무 많이 추가하지 마세요.

이상적으로는 마케팅 디자인의 단일 방향을 명확하게 정의해야 합니다. 옵션의 타겟팅 및 제공은 초기 단계에서 이루어집니다. 명확하게 정의된 리드 카테고리가 있어야 하며 광고가 정확하게 타겟팅되어야 합니다. 광고가 분리되면 CTA 정의가 더 쉬워집니다. 몇 가지 예를 들어보겠습니다.

  • 잠재 고객을 대상으로 하는 경우 브랜드를 소개하거나 웹 사이트를 확인하도록 설득하는 콘텐츠가 있을 수 있습니다. 이러한 경우 CTA는 더 많은 정보를 수집하기 위해 웹사이트나 소셜 미디어 페이지로 안내할 가능성이 높습니다.
  • 귀하의 웹사이트 또는 소셜 미디어 페이지에 방문하는 리드는 첫 번째 관심 수준을 나타냅니다. 다음은 올바른 전략으로 그들을 설득하는 것입니다. 여기에서 다운로드 버튼이 있는 리드 마그넷 또는 구독 버튼이 있는 리드 캡처 페이지를 사용할 수 있습니다.
  • 기존 고객의 경우 위시리스트에 있는 항목이나 탐색한 항목에 대한 관련 제안을 보내면 CTA가 제품 페이지로 이동합니다.
  • 그리고 이메일 주소가 장바구니 포기인 경우 CTA는 고객을 장바구니로 안내하여 주문을 진행합니다.

구매자가 찾고 있는 것이 무엇인지, 다음에 어디로 안내해야 하는지 알기 위해서는 구매자의 여정을 더 잘 이해해야 합니다. 이 모든 경우에 단일 CTA를 갖는 것이 가장 합리적입니다.

리드 깔때기의 초기 단계에 있는 리드의 경우 너무 많은 선택이 혼란을 야기하고 혼란스러운 리드가 결정을 내리지 못할 수 있습니다.

공백
원천
7. 단, 방향이 여럿일 때는 일관성을 유지하라

단순한 마케팅 디자인을 위해 단일 CTA는 혼란을 피하고 전환율을 높입니다. 그러나 가장 큰 영향을 미치기 위해 여러 CTA가 필요한 곳이 있습니다. 랜딩 페이지 및 일부 이메일과 같은 긴 형식 디자인의 경우입니다.

콘텐츠가 길어지면 자주 휴식을 취하고 각 섹션에 CTA를 추가하는 것이 고객이 페이지 맨 아래까지 읽고 거기에서 CTA를 찾기를 바라는 것보다 훨씬 낫습니다.

또는 랜딩 페이지나 이메일이 고객이 구매할 제품 옵션 세트를 보는 쇼핑 가이드 형식인 경우 각 옵션에 대해 다른 CTA가 가장 적합합니다.

여러 CTA가 있는 이러한 모든 경우에 CTA 간에 시각적 일관성을 설정하십시오. 각 CTA 디자인이 서로 다르게 보이면 전체 디자인이 어색해 보일 수 있습니다. 유지해야 할 몇 가지 사항은 다음과 같습니다.

  • CTA 버튼 모양 및 색상
  • CTA 카피에 사용된 글꼴
  • 버튼 내 CTA 사본 정렬
  • CTA 버튼의 방향

아래 랜딩 페이지는 각 섹션마다 다른 CTA가 있지만 CTA 디자인은 모두 일관되게 보입니다. 페이지를 보다 체계적으로 보이게 합니다. 그리고 유용성 관점에서 볼 때 고객이 이러한 CTA 몇 개를 보게 되면 웹 사이트에서 유사한 녹색 버튼이 표시될 때마다 다른 단계로 연결되는 클릭 가능한 링크라는 것을 알 수 있습니다.

공백
Kimp의 랜딩 페이지 디자인

Kimp로 클릭 가치가 있는 CTA 디자인 만들기

CTA는 고객을 의도한 방향으로 안내하여 대부분의 마케팅 디자인을 완전하게 만듭니다. 따라서 이메일, 랜딩 페이지, 배너 광고 및 CTA가 적절하다고 느끼는 다른 모든 마케팅 디자인에 하나를 추가하는 것을 잊지 마십시오. CTA는 인쇄 광고에도 나타나며 여기서는 대부분 웹사이트 주소나 비즈니스 연락처 정보가 됩니다. 그러나 고객이 원하는 행동을 취할 수 있도록 디자인의 나머지 부분에서 눈에 띄어야 합니다. 디자인 구조를 어지럽히지 않고 CTA를 추가하거나 CTA를 어디에 사용해야 하는지, 어떻게 혼란스러워 보이는지 이해하는 경우 디자이너에게 맡기십시오. Kimp 구독을 선택하십시오. 지금 무료 평가판에 등록하십시오.