'전환' 목적의 웹페이지 메인 버튼, 어떻게 설계하고 있나요?

웹페이지가 잘 구축된 기업의 메인 페이지를 참고하여, 감에 의존하여 기획하지 않으신가요? 프로모션 기획자로 초창기에 일할 때 제가 그랬거든요.

메인 페이지 어디 위치? 어떤 색상과 모양? 어떤 워딩으로? 클릭 시 이벤트 영역의 어디로 이동할 건지? 다양한 고민을 했는데요.

페이지를 기획, 분석하면서 좀 더 다양한 테스트를 하면서 저만의 설계 공식을 쌓아가는 중입니다.

Data Driven UX 스터디 6월 노션 가이드 준비 중, 효과적인 CTA (Click to Action) 설계를 위한 체크리스트 10가지에 대한 예시가 있어서 참고하시면 좋을 것 같아 공유합니다.

홈페이지, 광고 외에도 콘텐츠 만들 때 '전환' 목적으로 버튼 설계할 때 참고해 보세요!

효과적인 CTA 버튼 설계 시

체크리스트 10

목적, 디자인, 서비스 기획적인 3가지 요소로 나누어 확인해 보세요!

[목적]

1) 서비스 또는 웹 사이트의 목적? 운영 목적을 확인 > 서비스 목적을 명확히 한 뒤 설계 '행동' 촉구 유도 필요

2) 사용자가 얻을 수 있는 가치가 명확한가? 사용자의 이익 - 당연한 기대 심리를 활용

[디자인]

3) 사용자의 시선을 끄는 디자인인가? 클릭이 가능한 디자인, 여백을 활용하기

4) CTA 버튼 위치가 적절한가? 피츠의 법칙에 따라 버튼 크기가 크고 가까이 있을수록 편의성이 올라감

5) 선택할 수 있는 버튼이 너무 많지 않은가? 더 적은 선택지를 주고 쉽게 선택할 수 있게 함

6) Average Fold 상단/하단에 있는가? 페이지에서 제공하는 상품과 서비스 난이도에 따라 위치 검토

[서비스 기획]

7) 행동을 촉구하는 구어체 문구인가? 희소성 (긴장감, 긴박감)

8) 1인칭 시점에서 소 구하는가? 1~2인칭의 당신, 나, 너가 공감이 더 잘됨

9) 프로세스가 이어지는 느낌을 줄 수 있는가? 이어진다는 암시를 계속 줄 것

10) SEO를 실행하기 위해 마케터와 협업이 가능한가? 검색엔진최적화 작성 시 유의

CTA 버튼 설계 시 10가지 체크리스트를 고려해 설계한 후, 어떤 경우에 '전환수 or 전환율'이 높은지 테스트와 분석을 거쳐서 최적화된 설계를 만들어가면 됩니다. 책 본문에도 9가지 예시가 있는데 이미지와 해석이 같이 설명되어 있어서 확인 꼭 해보세요.

본문에 넷플릭스 예시가 있어서, 경쟁사 페이지 확인하던 중 디즈니, 쿠팡플레이, 티빙, 왓챠 5개 페이지를 비교해 보면 좋겠다 싶어서 해당 기업의 CTA 버튼을 잘한 점, 개선점을 작성 및 비교해 보려고 합니다.

* 전문 서비스 기획자가 아니기 때문에 사용하는 '워딩, 단어'가 명확하지 않을 수 있습니다.

1) 넷플릭스 https://www.netflix.com/kr/

* 목적 : 신규 구독자를 늘리기 위해서 [이메일 주소 - 시작하기 >]' 설계해 직관적이다.

* 디자인 : 메인 상단 좌측, 가장 잘 보이는 영역에 [빨간색], [네모 박스]로 디자인하여 메인 브랜드 컬러와도 잘 어울리고 눈에 띈다.

* 서비스 : 메인 상단 - 하단 푸터 위에 동일한 버튼을 두 번 설계하여 가입을 놓치지 않게 구성한 점은 좋았으나 워딩을 다르게 바꿔보는 테스트를 해봐도 좋지 않을까 싶다.

* 기타 의견 : [메인 - 본문 (특징4) - 자주 묻는 질문 - 푸터] 구성으로 심플하지만, 다른 OTT 서비스와 차별점을 내세우지 않아서 아쉽다. 본문에 버튼을 넣어 어떤 콘텐츠를 볼 수 있는지 팝업창 혹은 연결 페이지로 이동하게 만들어서 전환하게 만드는 방법으로 개선하면 좋을 것 같다.

2) 디즈니 플러스 https://www.disneyplus.com/ko-kr

* 목적 : 신규 구독자를 늘리기 위해서 [이메일 주소 - 시작하기 >]' 설계해 직관적이다. (넷플릭스와 동일)

다른 점이 있다면, 멤버십 가격을 기재해 두었고 '무료'라는 말이 없어서 가입을 망설이게 된다.

* 디자인 : 메인 상단 좌측, 가장 잘 보이는 영역에 [파란색], 이메일과 연결되어 디자인. 메인 브랜드 컬러와도 잘 어울리고 눈에 띈다.

* 서비스 : 메인 바로 밑에 4가지 특징, 특징을 설명하는 3가지 본문 설명, 콘텐츠, 자주 묻는 질문 구성으로 되어있다. 메인 바로 밑에 이미지 없이 겹치는 내용은 삭제해도 좋을 것 같다. 본문은 마찬가지로 이미지로 되어있고 클릭 요소는 없다.

* 기타 의견 : 우측 상단에 '지금 가입'이라는 탭이 메인 미틍로 내려가면 생기는데 잘 눈에 띄지는 않는 것 같다. 차라리 하단 푸터 배너를 설치하여 전환을 유도하는 쪽으로 버튼을 크게 디자인하는 게 어떨까라는 생각이 들었다.

3) 쿠팡플레이 https://www.coupangplay.com

* 목적 : 메인 상단에 '첫달 무료로 시작하기' 무료한 버튼 1개만 있다. 그아래 와우회원 로그인 (와우는 무료)이라 순서상 '신규 회원 유치'가 중요도가 더 중요한 요소로 보인다.

* 디자인 : 버튼 'hover'시, 색상이 바뀌거나 버튼이 움직이는 기능이 없어서 행동이 촉구되지 않는다. 좀 심심한 느낌이랄까? 그리고 브랜드 컬러가 빨강(쿠팡), 파랑(쿠팡플레이) 서로 달라 브랜드 컬러가 인지가 안된다. 디즈니의 파란색이 연상된다.

* 서비스 : 쿠팡플레이 시리즈를 가장 내세웠고, '이용하면 좋은점' 4가지 이유를 짧고 명확하게 기재 했다. 콘텐츠는 오픈 및 연결하지 않았다. 쿠플 시리즈 중 인기 있었던 콘텐츠를 움직이는 영역으로 더 많이 보여줬다면 더 좋을 것 같다.

* 기타 의견 : 하단까지 내려가면 어떤 '버튼'도 없다. 상단/하단 푸터 배너로 '신청하기'를 유도하면 좋을 것 같다.

4) 티빙 https://www.tving.com/

* 목적 : '티빙을 플레이'하세요는 가입보다는 신규/기존 구분 없이 로그인 하는 느낌의 워딩이라 수정하면 좋을 것 같다. 그리고 버튼 클릭 계정 선택이 너무 많다. 더 적은 선택지를 주고 2~3개 정도로 줄이는 게 어떨지.

* 디자인 : 콘텐츠 영역에 버튼은 없지만, 영상이나 이미지 자동 롤링으로 다양한 콘텐츠를 보여주는 점은 5개 회사 중 가장 잘했다고 느껴진다 (개인적인 취향) 5월 라이브 중인 콘텐츠, 실제 티비나 모바일에서 시청하는 듯한 레이아웃 디자인에 영상도 끊기지 않고 잘 나와서 개발 분야가 전문적으로 보인다.

* 서비스 : '무료, 체험, 가입' 등 행동을 취할 수 있는 워딩이 좀 더 명확하면 가장 마음에 드는 페이지였다.

* 기타 의견 : 다양한 콘텐츠를 볼 수 있는 이점이 있으나, 다양한 쿠폰 프로모션을 하고 있어서 인지 쿠폰 등록, 가입 절차가 복잡해 보여서 신규 유입자를 쿠폰 유무에 따라 나누는 게 어떨지 고민하게 되는 부분이다.

5) 왓챠 https://watcha.com/

* 목적 : '신규 가입' 시키기 위해 본문 5가지 영역 모두 동일한 위치에 '버튼'을 넣었다. '2주 무료 이용 시작', 새로고침하면 이미지가 계속 바뀐다. 가장 심플하긴 하다.

* 디자인 : 버튼 'hover'시, 색상이 바뀌거나 버튼이 움직이는 기능이 없다. '손가락'은 나왔다 안나왔다 한다.

* 서비스 : 어떤 영역에서 효율이 잘 나올지 버튼 영역의 텍스트를 바꾸어 테스트해보면 좋을 것 같다.

원하는 데이터를 추출하려면 해당 영역은 스터디가 필요하다. 퍼포먼스 마케터가 있어서 세팅되어 있지만 유의미한 인사이트를 뽑아내기 위해서 내가 직접 확인해야 한다.

웹페이지 개선

1) 스크롤 뎁스 도달률 < 이탈률, 체류시간 검토

2) 클릭률 < 클릭수로 고객 니즈 파악, 디바이스(PC/M) 클릭수 비교 후 UXUI 개선

3) 전환 페이지 < 이탈하는 페이지와 연관성 확인

중점으로 보는 데이터를 주차별로 정리해 가설을 세우고 결과를 확인해보면 된다. 프로모션은 2주 간격으로 업데이트하면서 진행하고, 효율이 나빠지지 않게 유지하면서 진행하며, 다음 달에 성과 측정 시 어떤 유의미한 값을 얻을지 지속적으로 테스트하는 과정으로 웹페이지를 개선할 수 있다.

유효 전환

1) 전환 < 실제 진성 유저가 맞는지 파악

2) 진성 유저의 니즈 파악

L 유입 경로, 전환 소재, 신청한 니즈 등

L 관련 핏에 맞게 광고, 매체, 프로모션 개선

위에서 소개했던 10가지 체크리스트를 웹페이지 버튼 전반에 적용하여, 테스트 > 실행 > 결과 > 반영 > 테스트의 과정을 거치면서 개선 효과를 보셨으면 좋겠다.

!

뷰저블 서포터즈 1기로 제품을 무료로 제공받아 작성된 솔직한 후기입니다.

CTA 버튼 설계 시 체크리스트 & OTT 서비스 분석 예시

CTA 버튼 설계 시 체크리스트 & OTT 서비스 분석 예시