UX & Design

“CTA 버튼으로 전환율을 높이고 싶다”는 분, 손!

디지털 시대, 고객이 최종 전환에 이르기까지 가장 중요한 것은 무엇일까? 바로 CTA 버튼이다. 즉, 사용자가 실행을 위한 클릭(행동)을 유도하기 때문이다. CTA 버튼은 웹사이트나 모바일 상에서 구현된 ‘문의하기’나 ‘회원가입’, ‘장바구니’, ‘구매하기’, ‘찜하기’ 등 중요한 전환 지점을 담고 있다. CTA 버튼 요소를 무엇을 중심으로 어떻게 구현하느냐에 따라 클릭율에 차이가 발생한다. 이번에 독자 여러분께 소개할 글은 전환율을 높이기 위한 가이드와 사례다. 일단 모두 챙겨놓자.

글. 김관식 기자 seoulpol@wirelink.co.kr
출처. https://www.mobilespoon.net

<일반적인 팁>

하나. 사용자 중심의 메시지의 일관성

전환율을 최적화한다는 것은 특정 단계가 아닌 전체 유입 경로를 최적화하는 것이다. 메시지의 일관성을 유지하고 광고나 방문 페이지, 제품 페이지 등 전체 유입 경로에서 유사하게 흩어진 단어를 하나로 통일해야 한다. 메시지가 일관성이 없다면 사용자는 오해할 수 있을뿐더러 제대로 된 정보를 얻기 힘들 것이다.
사용자가 지금 당장 무엇이 필요한지, 어떤 것을 요구하는지 파악해 제시해야 한다. 사용자에게 가장 중요한 것을 뽑으라면 수익이나 이점, 결과 등을 꼽을 수 있다.

둘. CTA 버튼 최소화

무엇이든 선택지가 많으면 더 유용하고 풍요로운 정보를 전달할 수 있을 것 같지만 꼭 그런 것만 것 아니다. 직관성을 반영하고 행동을 유도하기 위한 키(Key) 역할에 집중하는 편이 좋다. 선택할 수 있는 옵션이 많으면 그만큼 마찰이 발생하고 마찰은 다시 사용자의 서비스 이용 속도를 늦춘다. 그럼으로써 사용자는 행동하기 전에 잠시 머뭇거리며 생각을 하기 마련이다.
설계자는 사용자가 무엇이 필요한지, 어떤 일이 발생할지, 왜 접속했는지 파악하면 그들의 니즈를 알아낼 수 있다. 그들이 빠르게 원하는 값을 얻을 수 있도록 CTA 버튼을 최소화하자. 그 버튼이 1개면 훌륭하다. 또한 작업을 완료하는 데 소요되는 단계와 필드 수를 줄이자. CTA 버튼을 누르기도 전에 거쳐야 하는 기나긴 단계는 사용자를 지치게 만들 것이다.

셋. 가치 우선, 추후 헌신

사용자 개인 정보나 신용 카드 정보, 푸시 알림, 카메라/위치 액세스 권한 또는 사용자가 혜택을 받기 전에 기타 약정을 요청하면 전환율이 감소한다. 무엇보다 사용자가 해당 버튼을 누르도록 유도하는 것이 먼저다. 나머지 걱정은 순차적으로 한다.

<디자인 요소>

넷. 눈에 잘 띄는 버튼

버튼은 누구나 쉽게 찾을 수 있어야 한다. Von Restorff Effect에서 소개한 자료를 보면 여러 개의 동종 정보가 함께 사용자에게 공개될 때 나머지 정보와 또 다른 정보가 효율적으로 인식된다. 크기와 색상, 배치, 위치, 질감, 모양, 그림자, 채도, 그라디언트와 글꼴 등을 사용해 버튼을 돋보이게 한다.

다섯. 쉬운 접근성 유지

CTA 버튼에 액세스하는 것은 사용자가사용하는 화면 크기나 방향, 언어에 관계없어야 한다. 테스크톱 용으로 디자인할 때는 랩톱에서 테스트하거나 모바일 용으로 디자인할 때는 가장 작은 인기 스마트폰에서 테스트하길 권장한다. 이때 반드시 CTA 버튼이 항상 눈에 잘 띄고 쉽게 액세스할 수 있는지 사용자 입장에서 다시 한 번 확인해야 한다.

여섯, 접히는 페이지 위에 배치

웹사이트나 모바일 모두 스크롤 없이 볼 수 있는 부분에 버튼을 배치하는 것이 효율적이다. 이와 관련한 흥미로운 통계가 있다. Nielsen Norman Group이 첫 화면에 소비되는 콘텐츠에 대해 2010년과 2018년에 한 번씩 두 번의 연구를 수행했다. 2010년에는 사용자의 80%가 스크롤 없이 볼 수 있는 부분의 콘텐츠를 소비했다. 반면, 2018년에는 이 수치가 57%로 크게 변경됐다. 특히 모바일 화면을 스크롤을 활용, 3등분하면 첫 번째와 두 번째 화면에서 콘텐츠의 74%를 소비했다. 이러한 연구를 토대로 결론을 내리면 사용자는 예전보다 수직으로 더 많이 스크롤하지만, 새로운 시선 추적 데이터에 따르면 여전히 페이지 접힌 부분까지 사용자에게 제일 많이 노출된다는 것이다. 중요한 점은 콘텐츠가 모바일 화면에 노출됐을 때 바로 사용자에게 노출되지 않으면 방문자가 이후에 관심을 가질 가능성이 떨어진다는 점이다.

일곱, 둥근 모서리의 장점 살리기

모서리의 꼭지점을 둥글게 표현한 버튼이 변환율이 높게 나타난다고 한다. 왜 그런 걸까? 사람은 날카로운 모서리를 피하는 데 익숙하고 구부러진, 혹은 완곡하게 표현된 물체를 선호하는 경향이 있다. 그리고 둥근 모서리가 눈에 더 잘 띄는 점도 이유가 된다. 모서리를 둥글게 처리하면 다음 정보를 위해 시선을 모아주며 그만큼 버튼을 클릭(터치)할 확률이 높다.

여덟, 공백 3배

버튼의 모든 테두리와 구분 기호를 제거하고 공백을 세 배로 늘린다. 여기서 공백이란 버튼 외부 여백과 버튼 내부(패팅)을 모두 의미한다.

아홉, 크기를 억지로 키우지 않는다

버튼을 버튼처럼 보이게 디자인해야 한다. 너무 많이 늘리면(자동 크기 조정을 사용할 때 간간히 발생함) 전체적인 조화에서 어긋날 수 있으니 주의한다.

열, 짧고 간단한 코멘트

처음 방문한 사용자에게 기나긴 텍스트를 읽도록 강요하는 건 금물이다. CTR 버튼에는 2단어, 많아야 5단어를 넘지 않아야 한다. 문장이 길다면 자르고 잘라, 덜 중요한 것은 쳐낸다. 중복되는 단어를 합쳐도 텍스트는 얼마든지 줄일 수 있다. 항상 텍스트를 어떻게 하면 더 줄이고 직관적으로 나타낼 수 있을까 고민해야 한다. 일반동사 중심으로 구성하되, 모호하거나 추상적인 단어는 사용하지 않는다. 추천하는 단어의 종류는 행동을 지향하는(유도하는) 동사나 명사 키워드를 사용하는 것이다. 예를 들면, ‘OO 가져오기’나 ‘OO 시험’, ‘OO 책’, ‘OO 다운로드’ 등을 꼽을 수 있다.

열 하나, 구체적인 이점 강조

사용자가 창을 닫지 않고 계속 이용하면 얻을 수 있는 이점을 구체적으로 보여줘야 한다. 버튼의 기능을 설명하는 대신 버튼을 클릭하면 어떤 일이 발생하는지를 나타내면 효과적이다.
-‘검색’ 대신 ‘항공편 찾기’
-‘노래 다운로드’ 대신
‘오프라인에서 노래 사용 가능’
-‘Book’ 대신
‘Book a massage’
-일반적인 ‘다운로드’ 대신
‘무료 보고서 받기’
-‘시작’ 대신
‘교육 시작’
덧붙여 사용자에게 반영할 이점을 나타낼 때 사용자가 사용하는 용어를 그대로 반영할 것을 추천한다.

열 둘, 친숙한 텍스트 서식 유지

사용자가 보기 편하고 이해가 쉬워야 한다. 그 진리 하나다. 숫자가 관련될 때는 숫자만 사용한다. 텍스트에 날짜를 포함해야 할 때는 오늘, 내일, 어제를 추가한다. 전화번호는 한 자릿수 블록으로 표시될 때 읽기가 더 어렵다. 번호를 쉽게 검색하려면 구두점을 활용하면 유용하다.

열 셋. 클릭 트리거(Click Triggers) 사용

때로는 버튼 옆에 추가 정보를 제공하면 사용자는 버튼을 더욱 쉽게 이해하고 어려움을 해소할 수 있다. 이러한 짧은 문장으로 추가 안내사항을 나타내는 것을 클릭 트리거(Click Triggers)라고 한다. 클릭 트리거는 제품관리자나 UX라이터가 CTA 전환율을 개선하고 높이는 데 참고하면 좋다. 사용자는 버튼을 클릭하기 전에 이런 생각을 한다. “내가 왜 이것을 이용해야 할까?” “다음은 어떤 절차가 있을까?” “얼마나 소요될까?”
그렇다면 우리는 CTA 버튼 아래에 짧고 간결한 메시지를 추가로 배치해 이러한 질문을 미리 해결하고 올바른 기대치를 높일 수 있다. “클릭 1회 결제” “친구만 이 게시물을 볼 수 있습니다” “10분 읽기” “10초 소요”

왼쪽 이미지는 보안 문제에 대한 우려를, 오른쪽은 프라이버시에 대한 우려를 없애기 위해 관련 아이콘과 설명을 추가로 버튼 아래에 배치했다.

열 넷, 보안문제와 프라이버시 문제 제거

누구나 위험을 경계한다. 보안의 중요성은 물론 개인정보의 유출도 갈수록 민감해지고 있다. 사용자가 이러한 우려를 상쇄할 수 있도록 버튼 아래에 밝힌다. 보안로고와 관련 아이콘을 활용해 사용자의 눈에 띄도록 만든다. 신용카드나 개인정보를 입력해야 하는 경우에 참고한다.

열 다섯, 희소성과 긴급성을 반영하되 즉각적인 혜택 언급

‘이 거래는 5시간 후에 종료됩니다’ ‘수요가 많음- 남은 개수 3개’ 등 희소성과 긴급한 상황을 반영하는 것도 생각할 수 있다. 단, 사용자와 신용을 지키는 부분도 중요하기 때문에 과장하거나 압박해서는 안 된다.
또한 사용자는 보상에 민감하기 때문에 빠른 혜택을 반영한 문구를 넣어주는 것도 효과적이다. 이러한 세세한 관심은 사용자가 더 빨리 행동하고 결과를 내는 데 촉매제가 된다.

Comments
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts