버튼 문구가 클릭 뒤에 벌어질 일을 분명히 알려주는지 비교합니다.
<div class="ctatest"><div class="button" id="button">SUBMIT</div><div class="cursor"></div><div class="next" id="next">NEXT: ACCOUNT SETUP</div></div>.ctatest{position:relative;width:min(65%,320px);text-align:center;font:900 clamp(11px,max(2.1vmin,1vw),18px)/1.1 sans-serif}.button{padding:clamp(12px,3vmin,24px);background:var(--accent);color:white}.cursor{position:absolute;width:0;height:0;border-left:clamp(9px,2vmin,16px) solid var(--fg);border-top:clamp(12px,2.8vmin,22px) solid transparent;top:70%;left:73%;animation:cursor 3.4s infinite}.next{border:2px solid var(--line);padding:8px;margin-top:12px;color:var(--muted);opacity:.25;animation:next 3.4s infinite}@keyframes cursor{0%,20%{transform:translate(28px,35px)}45%,75%{transform:translate(0,0)}100%{transform:translate(28px,35px)}}@keyframes next{0%,45%{opacity:.25}55%,85%{opacity:1;color:var(--accent)}100%{opacity:.25}}const button=document.querySelector('#button');setInterval(()=>{button.textContent=button.textContent==='SUBMIT'?'SEE MY PLAN':'SUBMIT'},1700);CTA 문구는 버튼을 누르면 무엇이 일어나는지 알려주는 작은 약속입니다. '제출' 같은 일반어보다 실제 다음 단계가 보이는 표현이 고객의 기대를 맞추기 쉽습니다.
데모에서는 모호한 버튼이 구체적인 다음 단계 문구로 바뀌고, 가상 커서가 버튼에서 확인 화면으로 이동합니다. 버튼 색과 위치는 그대로 두고 문구만 비교하는 실험입니다.
클릭 수가 늘어도 뒤에서 이탈하면 좋은 문구가 아닙니다. 클릭 이후의 완료율과 오해를 낳는 문의까지 함께 봅니다.
클릭은 적거나 클릭 후 이탈이 많을 때 기대와 실제 다음 단계가 맞는지 확인합니다.