*본 글은 디자인 뉴스레터 디독에서 발행한 글입니다.
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
1.액션(Action)=모션(Motion)
2.다음 단계 설명
3.미스터리를 만들지 말라
4.수월하게 만들어라
5.짧고 톡톡 튀게 만들어라
6.이중 부정을 피해라
7.끝났다면 축하해줘라!
버튼 라벨 디자인을 하는 것은 쉬워야 한다. 두어 단어를 넣는 게 어려울리 없기 때문이다. 그러나 실제로는 버튼에 들어갈 단어들을 선택하는 것은 어렵다. 무엇을 남겨 둘지만큼 빼는 것도 중요하기 때문이다.
그래서 나는 델리버루(Deliveroo)에서 하는 버튼의 클릭률을 높이는 몇 가지 팁을 알려주고 싶었다.
1. 액션(Action)=모션(Motion)
콜 투 액션(Call to action)은 어떤 행동을 불러일으키기 무언가를 하는 것이다. 따라서 라벨이 방향성을 가져야 함을 의미한다. 방향성은 보통 앞을 향하지만, 뒤로도 갈 수 있다. 때에 따라 액션은 동사를 확인하는 것일 수 있다. 예컨대 Got it 또는 OK처럼 말이다. 이는 본질적으로 ‘이해했다’라는 것을 의미한다.
앞뒤로 라벨이 공존하는 경우 상호보완적이어야 한다. 몇 가지 예를 살펴보자.
부적합:
위의 라벨에 쓰인 용어는 일관성이 없고, ‘이전(Previous)’은 다소 소극적이기 때문에 행동을 불러 일으키기 어렵다.
개선 방법:
이 두 용어는 더 일관되게 보이지만 ‘다음(Next)’은 앞으로의 움직임을 암시하는 반면, 여전히 수동적이다. ‘이전’은 자연어가 아니므로, 덜 형식적이며 더 친근한 용어를 사용하는 게 좋다.
최고의 방법:
이제 훨씬 좋아 보인다. 두 개의 동사를 사용하여, 훨씬 일관성 있고 쉬운 용어가 되었다.
2. 다음 단계 설명
사용자는 최소한의 노력으로 작업을 완료하려고 한다. 따라서 다음 단계에 대한 기대치 설정을 중심으로 CTA 라벨을 작업해야 한다. 이들은 방향성을 갖고 있기 때문에, 사용자들이 올바른 위치에 있는지 안심시킬 수 있어야 한다. 즉 다음 작업에서 버튼의 라벨을 정할 때, 다음 화면의 타이틀과 일치하도록 하는 게 좋다는 뜻이다.
방향성을 잃었을 때:
위는 방향성을 잃었을 때이다. 사용자는 ‘결제하다(Make payment)’를 클릭하지만, 다음 화면에서 가장 먼저 ‘로그인’이 표시된다. 이는 사용자가 결제를 위해 로그인을 해야 하더라도 혼란을 줄 수 있다. 이럴 때 콜 투 액션을 ‘결제를 위해 로그인하십시오(Log in to pay)’처럼 바꾸는 게 좋다.
개선 방법:
위의 경우 콜 투 액션과 다음 페이지 제목 모두에서 ‘결제(payment)’라는 단어가 있기 때문에 더 일관성 있다. 하지만 ‘당신의 결제(Your payment)’는 아직 결제하지 않았다면 혼란을 줄 수 있는 용어이다.
최고의 방법:
이는 완전히 일관성을 갖추고 있기 때문에 사용자가 안심할 수 있다. 사용자는 다음에 어떤 일이 일어나는지를 이해하고, CTA를 클릭하면 올바른 위치에 있다고 생각할 것이다.
3. 미스터리를 만들지 말라
CTA는 클릭하는 즉시 어떤 일이 일어날지 또 무엇을 할 수 있는지 명백하게 알 수 있어야 한다. 즉, 사용자는 CTA를 클릭해야 하는 이유를 알고 있어야 한다. 이를 자세히 알아보자.
불확실한 경우:
사용자는 처음에 왜 이 링크를 클릭해야 하는지 전혀 모를 것이다. 어떤 계정의 영역으로 이동하리라 추측 할 수 있지만, 왜 가야 하는지 또는 로그인을 해야 하는지에 대한 여부는 알 수 없다. 클릭하기 전까지는 말이다. 마찬가지로 어떠한 동사나 진행감에 대한 것들이 결여되었다.
개선 방법:
이 방법은 좀 낫다. 그러나 로그인하라는 메시지는 표시되지만, 그 이유에 대해서는 명확하지 않다.
최고의 방법:
이제 사용자는 정책에 대한 작업 중 하나를 수행하려면 CTA를 클릭해야 한다고 이해할 것이다. 이는 실제 진행해야 하는 일 중심(task-focused)일 뿐만 아니라 명확하다.
CTA는 온라인에서의 경험을 편리하게 만들어주어야 한다. (사용자들을 전환하는 게 목적이라면) 그들의 흥미를 끌어야 하고, (일을 수월하게 완수하는 게 목적이라면) 오류가 없어야 하며
(사용자가 무언가를 달성하였다고 안심시켜주는 게 목적이라면) 축하받는 느낌을 받도록 해야 한다. 어조에 대해 고민하는 것은 정말 중요하다. 예컨대, 우리는 음성 가이드라인에 따라 누군가가 음식을 구매할 수 있도록 자극하는 고객 앱에서 더 매력적인 언어를 선택한다. 반면에 라이더 앱처럼 가능한 한 빨리 라이더를 이동시켜야 하는 게 목적이라면 기545능적인 버튼 라벨을 선택할 것이다.
다음은 CTA 사용을 좀 더 고무시키는 예이다.
평범한 경우:
이것은 명확하며 방향성을 갖고 있지만 매우 형식적이며 감정이 결여되어 보인다.
개선 방법:
이 버전은 1인칭을 사용함으로써 좀 더 개인적인 느낌이 든다. 하지만 여전히 재미가 부족하다.
최고의 방법:
이제 더 흥미로워졌다. ‘렛츠(let’s)’를 사용하면 사용자가 혼자가 아니라는 것을 알려주면서 그들에게 길을 안내해 줄 것이라는 확신을 준다.
버튼 레이블은 공간이 한정되어 있기 때문에 메시지를 가능한 한 짧게 유지해야 한다. 불필요한 단어를 없애면 CTA를 짧고 매력적으로 유지하는 데 도움이 된다.
너무 긴 경우:
이것은 업무 중심적이며 일인칭을 사용한다. 그러나 ‘지금(now)’은 꼭 필요하지 않으며, ‘재입력(re-enter)’은 읽기 어렵고 너무 길다.
개선 방법:
우리는 더는 필요치 않은 세부적인 것들을 없앴지만, 이것이 암호 필드 옆에 있다면 ‘암호(password)’라는 단어조차 필요 없을 수 있다.
최고의 방법:
이것은 짧지만, 여전히 업무 중심적이며 설명적이다.
사용자는 CTA 클릭을 걱정해서는 안 된다. 이중 부정보다 더 혼란스러운 것은 없다.
혼란을 주는 경우:
‘계속하기(continue)’가 취소가 될까, ‘취소하다(cancel)’가 취소가 될까? 취소를 취소하는 것은 사용자에게 매우 큰 혼란을 준다.
개선 방법:
이것은 더 명확하다. 단순히 ‘예’ 또는 ‘아니오’이다. 하지만 우리는 동사로부터 멀어졌으므로 다음에 일어날 일에 대해서 전혀 힌트를 얻을 수 없다.
최고의 방법:
‘계속하기(keep it)’와 ‘취소(cancel)’를 추가한다면 사용자는 안심하면서 다음에 어떤 일이 발생할지 정확히 확인할 수 있다.
사용자가 여정이 끝나갈 무렵에 CTA가 필요하다면, CTA를 사용하여 작업을 성공적으로 완료했음을 상기시켜라. 이 경우 사용자가, 많은 온보딩 과제 중 하나를 완료했다고 가정한다.
표준:
이것은 흔히 볼 수 있는 라벨이지만, 브랜드의 목소리와 일치하지 않으며 매우 수동적이다.
개선 방법:
일인칭 사용은 훨씬 적극적이며, 다음 단계(이 경우 홈페이지 또는 계정 페이지로 돌아가기)를 표시하는 것은 다음에 발생할 일에 대한 좋은 힌트가 된다.
최고의 방법:
이것은 짧고 액션 기반이지만, 축하의 감탄사 ‘우후(whoop)’를 표시하면 브랜드의 개성을 더하는 동시에 성취감을 준다.
CTA와 함께 즐거운 시간이 되길 바란다.
저자 : Rachel McConnell
원문 링크: https://medium.com/deliveroo-design/lets-do-this-how-to-write-better-calls-to-action-ea534768b599
*무단 전재 및 재배포 금지(링크 공유 가능)
*본 글은 디자인 뉴스레터 디독에서 발행한 글입니다.
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv