UI 디자인 가이드 : 전환율 높은 CTA 버튼 설계
고객 전환율이란?
사용자가 웹 사이트, 온라인 앱 또는 기타 디지털 플랫폼에서 원하는 동작 또는 목표를 완료하면 전환이 발생합니다. 구매 / 양식 제출과 같은 이벤트(전환 이벤트라고 함) 또는 일정 기간 내 재방문 수와 같은 지표가 될 수 있습니다.
고객 전환율은 웹 사이트, 앱 또는 디지털 플랫폼의 트래픽이 매출로 얼마나 잘 연결되는지를 알려주는 수치로, 중요한 마케팅 지표입니다.
웹 사이트 or 앱 고객 전환율은 브랜드가 얼마나 효과적으로 온라인 플랫폼의 트래픽을 매출로 변환하고 있는지를 말합니다. 퍼널 전환율은 온라인 플랫폼 방문자가 얼마나 성공적으로 고객 전환 퍼널을 완료하는지를 말합니다.
CTA(Call to action) 버튼
목표달성 버튼, 즉 사이트(서비스) 내 목표를 달성하기 위해 고객에게 행동을 유도하는 버튼이나 배너를 말합니다.
The all-in-one guide to high-converting CTA buttons
저는 전환율 개선, UI 디자인의 인지적 편향 활용 , UX 작성 모범 사례에 대한 많은 팁을 요약해왔습니다.
다음은 전환율 높은 CTA 버튼을 디자인하기 위한 30가지 규칙입니다.
이 가이드에는 공통 팁, 디자인 팁, UX 작성, 알아야 할 인지적 편견, 피해야 할 다크 패턴이 포함되어 있습니다.
General Tips
1. 메시지의 일관성 유지
전환율 최적화라는 건 특정 스텝만 최적화하는 것이 아니라 유입경로 전체를 최적화하는 것이라는 점을 기억하세요. 광고, 방문 페이지, App Store 상세 페이지 등 전체 유입경로에서 메시지와 스타일의 일관성을 유지하고 적절한 기대치를 설정하세요. 일관된 메시지가 없으면 사용자는 잘못 인도된 느낌을 받게 됩니다.
2. 사용자 관심사에 포커스
어떤 사용자도 제품서비스의 내부 사정에 관심을 두진 않습니다.
사용자의 관심사 : 얻을 수 있는 수익, 지출 비용, 얻을 수 있는 결과일 뿐입니다.
3. 신뢰감을 주세요.
사용자가 액션을 취하기 전에 가질 수 있는 우려 혹은 걱정거리를 해결해야 합니다.
신뢰를 구축할 수 있는 많은 방법(사회적 인증, 평가, 등급 시스템, 보안 인증서 등)이 있으므로 적절하게 사용하는게 좋습니다.
4. CTA 버튼은 단 한개로 최소화!
너무 많은 옵션은 마찰로 이어져서 사용자의 속도를 늦추고 행동하기 전에 생각하게 만듭니다.
사용자가 무슨 일이 일어나고 있는지("내가 왜 여기 있지?") 그리고 다음에 무엇을 해야 하는지("여길 클릭하면 되나?")를 빨리 파악하기를 원합니다.
1 CTA 버튼을 목표로 합니다. 마찰이 의도된 것이 아니라면 말이죠.
5. 더 긴 액션 경로 = 더 큰 이탈
작업을 완료하는 데 필요한 단계/필드 수를 최소화하도록 합니다.
사용자가 가장 중요한(CTA) 버튼을 누르기 전에 수행하는 추가 단계가 늘어날 때마다, 이탈율이 높아집니다.
6. 가치를 먼저 제공하고, 동의는 나중에.
최종 선택을 하기 전에 먼저 미래 가치에 대한 정보를 보여주세요.
사용자 액션이 일어나기 전에 개인 정보, 신용카드, 푸시 알림, 카메라/위치 액세스 권한 또는 기타 동의 요청을 하면 전환율이 감소합니다.
먼저 버튼을 누르도록 하고 나머지는 나중에 걱정하게 하는거죠.
Remember: every word counts.
모든 말이 중요합니다.
전문용어를 주의깊게 선택하고 항상 용어 가정에 대해 다시 확인하세요.
최근 Apple 팟캐스트 용어 변경('구독' > '팔로우')에서 알 수 있듯이, 때로 단어 하나가 전환율에 큰 영향을 미칠 수 있습니다.
Design
7. '버튼처럼' 보이게 디자인하세요.
단지 링크처럼 보이지 않게
사이즈가 너무 작지 않게
너무 희미하거나, 너무 소박하지 않게
적당한 사이즈에 누르고싶은 볼드하고 컬러가 있는 스타일로요.
8. 눈에 띄게 만들기
CTA 버튼은 가장 눈에 띄어 누르기 좋은 곳에 두세요.
폰 레스토프 효과(Von Restorff Effect)에 따르면 여러 개의 비슷한 개체가 함께 표시될 때, 나머지 객체와 다른 객체가 더 눈에 잘 띄고 기억됩니다.
크기, 색상, 위치, 질감, 모양, 그림자, 채도, 그라데이션 및 글꼴을 사용하여 버튼을 눈에 띄게 만듭니다.
9. 접근성을 좋게 하세요.
CTA 버튼에 액세스하는 것은 사용하는 화면 크기, 방향 및 언어에 관계없이 가능해야 합니다.
데스크탑용 디자인인 경우, 노트북에서도 테스트를 거치세요.
모바일용 디자인인 경우, 인기있는 스마트폰 중 가장 작은 기기에서 테스트해보세요.
CTA 버튼이 항상 잘 보이고, 눈에 띄며, 쉽게 액세스(클릭,탭)가능하도록 하세요.
10. 별도의 위치에 배치하세요.
모바일에서 스크롤은 아주 습관적인 행동입니다. CTA 버튼은 스크롤 없이 어디서든 접근가능하도록 배치하세요.
11. 둥근 모서리(Rounded corners) 버튼을 사용하세요.
모서리가 둥근 버튼이 더 효과적이라고 합니다.
왜일까요?
사람들은 날카로운 모서리보다 구부러진 물체를 선호한다고 합니다.
둥근 모서리가 눈에 더 편하기 때문입니다.
둥근 모서리는 처리도 쉽고 시선의 포커스를 중심으로 향하게 합니다.
저는 A/B를 직접 테스트한 적은 없지만, 논쟁도 하지 않습니다. (*필자 의견??)
12. 여백을 넉넉하게 사용합니다.
모든 테두리와 구분선을 없애고, 공백을 세 배로 늘립니다.
여기서 "여백"이란 버튼 외부(여백)와 버튼 안쪽(패딩) 모두를 의미합니다.
13. 버튼의 사이즈도 중요합니다.
버튼은 버튼처럼 보여야 합니다.
가로 사이즈를 너무 늘인 경우 (auto-resize를 하는 경우 발생) 디자인과 혼합되어버려 시각적으로 놓쳐버리기 쉽습니다.
마이크로 카피(Microcopy) & UX Writing
14. 짧고 간단하게 유지
사용자(또는 방문자)에게 너무 긴 텍스트를 읽게 하지 마세요.
CTA 버튼은 2-5 단어면 충분합니다.(영문 기준)
긴 문장을 몇 단어로 된 짧은 구로 바꾸는 방법을 찾아보세요.
15. 의미가 모호하거나 너무 일반적인 단어를 사용하지 마세요.
사용자가 한 눈에 어떤 액션을 하는지 인지할 수 있도록 목적이 분명한 단어를 선택하세요.
Submit(제출)
Enter(입력)
Access(접근)
Complete(완료)
Learn(실행)
Read More(더보기)
다른 제품에서 자주 사용하는 용어라고 해서 매력이 있는 것은 아니랍니다.
16. 조금 더 행동지향적인 단어를 사용하세요.
조금 더 행동지향적 단어 :
Get(얻다)
Try(시도하다)
Book(예약)
Download(다운로드)
17. 이점을 강조하는 단어를 사용하세요.
계속 진행하면 사용자가 어떤 이점을 얻을 수 있나요?
버튼이 하는 일을 설명하지마세요.
대신 버튼을 클릭하면 사용자가 얻게 될 이점을 설명하는 단어를 사용하는게 좋아요.
아래 예시를 참고하세요.
검색(Search) → 항공편 찾기(Find flights)
음악 다운로드(Download song) → 오프라인에서도 음악듣기 (Make song available offline)
예약(Book) → 마사지 예약(Book a massage)
일반적인 '다운로드(Download)' → 무료 보고서 받기(Get your free report)
시작(Start) → "훈련 시작(Start training)"
그리고, 이점을 설명할 때는 사용자가 사용하는 용어를 사용하세요.
예를 들어 사용자는 노래가 다운로드 후 어디에 저장되는지보다는 비행중에도 음악을 들을 수 있다는 점에 더 관심이 있답니다.
18. 친숙한 텍스트 서식 사용
사용자가 텍스트를 더 쉽게 훑어볼 수 있도록 하세요.
숫자가 포함될때마다, 숫자로 표기하세요.
텍스트에 날짜를 포함할 때 현재를 기준으로 시간을 파악할 수 있도록 "오늘", "내일", "어제"로 추가합니다.
전화번호는 한 줄의 숫자로 표시될 때 읽기 어려우므로 번호 스캔이 쉽도록 기호로 구분해주세요.
19. "Click trigger(클릭 트리거)"로 버튼 장식하기
때로는, 버튼 옆에 있는 추가 정보를 통해 상황을 더 잘 이해하고, 불안감을 해소하거나, 문제를 해결할 수 있습니다. 이러한 짧은 문장은 예상 클릭을 유발하는 데 도움이 될 수 있으며 종종 "클릭 트리거"라고 불립니다.
다음은 제품 관리자와 UX Writer가 CTA 전환율을 개선하기 위해 따를 수 있는 몇 가지 "클릭 트리거" 예입니다.
사용자가 기대하는 바를 제시하세요.
"내가 왜 여기에 있지? 다음은 무엇입니까? 얼마나 걸릴까요?"
CTA 버튼 아래에 짧고 간결한 문장을 추가하여 이러한 질문에 답하고 기대하는 바를 먼저 제시하세요.
"한 번 클릭으로 체크 아웃"
"친구만 이 게시물을 볼 수 있습니다."
"10분 읽기"
20. 명확함 = 전환율 상승
사용자는 생각보다 겁이 많습니다. 버튼을 누르면, 어떤 일(결제와 같은)이 일어나버릴까 걱정을 하는거죠.
그 문제를 먼저 명확하게 해결해주세요.
예를 들어 일부 사용자가 "지금 예약" 버튼을 바로 클릭하지 않는 이유는 결제 프로세스가 시작될 것을 우려하기 때문입니다. 이 문제를 해결하기 위해 지금 버튼을 클릭하더라도 바로 결제되지 않는다는 설명을 담은 문구를 한 줄 추가하는겁니다. 이런 추가 문구가 이탈율을 감소시킵니다.
21. 보안 문제 제거
사용자는 리스크를 싫어합니다.(제로 리스크 편향)
잠재적인 우려(특히 지불과 관련된 경우)를 제거하기 위해 - 제품 보안 강점을 강조합니다.
보안 로고 및 아이콘을 사용하여 눈에 띄게 만드세요. 바로 신용 카드를 요구하지 않고, 환불 보증, 무료평가판을 제공하는 경우 이런 설명을 먼저 노출하세요.
22. 개인 정보 보호 문제 해결
사용자가 예측하는 결과가 모호한 경우 특히 개인 정보가 포함된 경우 전환율을 낮춥니다.(모호성 효과) 사용자의 세부 정보를 안전하게 유지하고 개인 정보를 존중하는 약속을 함으로써 개인 정보에 대한 우려를 해결하세요.
23. 설득력을 가지세요.
소셜 증명은 사용자에게 "그 버튼을 클릭"하는 것이 안전하며 권장된다는 것을 "신뢰할" 수 있습니다. CTA 버튼 옆에 추천서, 회사 로고, 사용자 리뷰, 카운터, 수상 내역, 미디어 멘션을 배치하면 됩니다. 너무 많이 사용되었지만 여전히 효과가 좋은 편입니다.
납득시키는 것만이 전환율이 높은 CTA 버튼에 대한 올인원 가이드입니다.
24. 클릭할 수 있도록 넛지를 주세요.
현재 특별한 캠페인을 진행 중이거나 특별한 거래를 제공하는 경우, 반드시 강조하십시오.
사용자는 이기는 것보다 잃는 것을 더 싫어하므로(손실 회피 편향) 버튼을 클릭하지 않을 경우 발생할 수 있는 손실을 강조하여 이를 활용합니다(즉, "돈 낭비 중단").
기억하세요, 이 방법은 당신(혹은 서비스)이 진실을 말하는 것이라면 완벽하게 합법적이지만, 다크 패턴이 되어서는 안된다는 걸요.
25. 희소성과 긴급성을 사용합니다.
“이 독점 계약는 5시간 후에 종료됩니다!”
“수요가 많은 - 7개의 객실만 남음”
낯이 익으시죠?
이 방법을 선호하는 건 아니지만, 사실 버튼 클릭률을 높이는 데 도움이 되긴 합니다.
다만, 사용자의 지불을 푸시하기위해 희소성을 위장하지는 마세요. 실제로 재고가 한정되어 있거나 서비스에 시간이 중요한 영향을 미칠 때만 사용하세요.
26. 즉각적인 혜택을 제공합니다.
사용자는 나중에 더 큰 보상(일명 Hyperbolic Discounting)보다 더 작은 빠른 보상을 선호합니다. 즉시 구매하는 대가로 약간의 할인(또는 무료 배송)을 제공합니다. 이 작은 추가 기능은 사용자가 더 빠르게 행동하도록 유도할 수 있습니다.
Dark patterns to avoid
피해야 할 다크 패턴
다음의 팁들은 "하면 안되는 것들"입니다.
*이 전에 작성된 관련 아티클을 참고하세요.( 교묘한 다크 패턴 UX )
27. 사용자에게 수치심을 유발하지 마세요.
그것은 부끄러운 일이며 사용자가 클릭하도록 압력을 가하도록 설계된 인기 있는 다크 패턴입니다.
28. 의도된 잘못된 디렉션을 사용하지 마세요.
UI가 잘못된 디자인 또는 잘못된 마이크로 카피를 사용해서 사용자를 일부러 잘못된 방향으로 유도하는 또 다른 인기 있는 다크 패턴입니다.
29. 불리한 버튼이라고 숨겨두지 마세요.
서비스 구독 취소나, 뉴스레터에서 구독을 취소하는 등 버튼 클릭이 비즈니스에 좋지 않은 경우도 있습니다.
일반적인 다크 패턴은 일부 사용자가 포기하기를 바라며 액션버튼을 숨기려고 시도하는 것입니다.
대부분의 다크 패턴과 마찬가지로 이런 방법은 단기적으로는 성공처럼 보이지만, 장기적으로 성과를 거두지 못하고 회사의 평판에 부정적인 영향을 미칠 수 있습니다.
그리고 마지막.
30. 마지막 팁: 사용자가 어떻게 행동할지 안다고 가정하지 마세요.
전환율을 개선하기 위한 모범 사례를 따르면 때로는 반대의 결과가 나타날 수 있습니다.
경우에 따라 변경으로 인해 특정 페이지/단계에서는 전환 속도가 향상될 수 있지만 다음 페이지/단계 중 하나에서는 일부 감소할 수도 있습니다.
특정한 변경이 사용자(특히 B2C 제품)의 행동에 어떤 영향을 미칠지 예측하기 어렵기 때문에 모든 제품 변화를 측정하고 A/B 테스트를 진행해보는 것이 중요합니다.
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
