손님은 진열대 앞에서 물건을 골랐다. 이제 계산만 하면 된다. 그런데 계산대가 어디 있는지 보이지 않는다. 두리번거리다, 결국 물건을 내려놓고 나간다. 웹사이트에서 흐릿한 버튼은 바로 이 사라진 계산대다. 첫 화면이 아무리 예뻐도, 마음을 먹은 손님조차 '어디를 눌러야 사는지' 3초 안에 보이지 않으면 그 마음은 그대로 식는다. 행동 유도 버튼(CTA)은 화면의 장식이 아니라 손님의 손가락을 데려다주는 계산대다.
1. 한 화면에는 '진짜 버튼' 하나만 둔다
구경하기, 다운로드, 회원가입, 문의하기, 전화걸기를 같은 색·같은 크기로 나란히 놓으면 손님은 그중 무엇도 누르지 않는다. 선택지가 많을수록 판단이 느려지고, 느려진 판단은 이탈로 이어진다.
- 화면마다 목표를 하나만 정한다. 이 화면에서 손님이 해야 할 단 하나의 행동을 정하고, 그 버튼만 눈에 띄게 만든다.
- 나머지는 계급을 낮춘다. 덜 중요한 행동은 테두리만 있는 버튼이나 텍스트 링크로 내려, 진짜 버튼과 경쟁하지 않게 한다.
2. 버튼 글자는 '무엇을 하는지'가 아니라 '무엇을 얻는지'로 쓴다
'제출', '확인', '보내기'는 손님이 아니라 시스템의 언어다. 손님은 버튼을 누른 다음에 무엇이 오는지 알고 싶어 한다.
- 동사에 이득을 붙인다. '문의하기'보다 '무료 견적 받기', '신청'보다 '10분 상담 예약하기'가 손가락을 움직인다.
- 불안을 덜어 준다. 버튼 아래 '1분이면 끝나요', '가입 없이 바로'처럼 한 줄을 더하면 클릭 앞의 망설임이 줄어든다.
3. 손님의 눈은 대비를 따라 움직인다
버튼이 배경이나 주변 요소와 비슷한 색이면, 아무리 크게 만들어도 손님 눈에는 '버튼처럼' 보이지 않는다. 브랜드 색을 여기저기 흩뿌려 놓으면 정작 눌러야 할 버튼이 그 속에 묻힌다.
- 버튼 색은 아껴 쓴다. 페이지에서 가장 진한 강조색은 '누르길 바라는 버튼'에만 남겨 둔다.
- 주변에 여백을 준다. 버튼을 다른 요소와 딱 붙이지 말고 사방에 빈 공간을 둬야, 그 하나만 도드라진다.
4. 결정적인 버튼은 손님이 마음먹는 순간에 놓는다
버튼을 첫 화면 맨 위에 한 번 넣고 끝내면, 아래로 내려가며 마음을 굳힌 손님은 다시 위로 올라가 버튼을 찾아야 한다. 그 수고에서 대부분이 떠난다.
- 결심이 생기는 지점마다 다시 놓는다. 가격을 본 직후, 후기를 읽은 직후, 페이지 맨 끝처럼 손님의 마음이 움직이는 자리에 같은 버튼을 반복해 둔다.
- 모바일에서는 손끝을 배려한다. 버튼은 손가락으로 편히 눌릴 만큼 충분히 크게, 화면 하단에 고정해 두면 스크롤 어디서든 계산대가 손 닿는 곳에 있다.
5. 누른 뒤가 매끄러워야 클릭이 완성된다
버튼을 눌렀는데 아무 반응이 없거나, 열두 칸짜리 양식이 갑자기 튀어나오면 손님은 방금의 결심을 후회한다. 클릭은 버튼에서 끝나는 게 아니라 그다음 화면까지 이어진다.
버튼은 손님에게 '여기를 누르면 원하는 곳에 데려다줄게'라는 약속이다. 그 약속이 지켜질 때만 손님은 다음에도 그 버튼을 믿고 누른다.
버튼 하나를 옮기고 문구 한 줄을 바꾸는 것만으로 문의 수가 눈에 띄게 달라지는 경우가 많다. CYAN은 작은 회사의 웹사이트를 만들 때 화면을 예쁘게 채우는 일보다, 손님의 손가락이 어디로 가야 하는지를 먼저 설계한다. 지금 쓰는 홈페이지에서 '가장 눌리길 바라는 버튼'이 무엇인지 한 문장으로 답하기 어렵다면, 그 버튼부터 다시 들여다볼 때다.
