모바일 CTA 버튼을 직관적으로 만들기
CTA버튼(Call To Action Button, 사용자의 목적을 달성하게 하는, 또는 사용자가 누르게 하여 서비스 제공자의 목적을 달성하게 하는 버튼)을 어떻게 하면 눈에 잘 들어 어도록, 직관적으로 만드는 방법에 대한 글입니다. 버튼의 중요도 및 역할에 따라 순서, 색상, 텍스트 굵기를 다르게 적용하는 방법을 안내하고 있습니다. 상식적인 내용이기는 하나 방법이 구체적으로 잘 정리되어 있으니 버튼 디자인이 고민되는 경우 판단의 기준 삼아 활용하면 좋을 것 같습니다.
이 글은 아래의 글을 요약 번역한 글입니다.
모바일 CTA 버튼을 직관적으로 만들기
버튼이 많을 수록 사용자가 어떤 버튼을 누를지 결정을 내리는데 시간이 오래 걸린다. 어떤 버튼을 눌러야 목적을 달성할 수 있는지 살펴봐야 하기 때문이다. 의미가 모호하거나 햇갈리는 버튼은 사용자가 더 이상 액션을 취하지 않거나 잘못된 액션을 취하게 만든다.
제공하는 액션 버튼에서 우선순위를 느껴지게 만들면 사용자는 본인의 목적 달성을 위해 어떤 버튼이 중요한 버튼인지 알게 되고, 올바른 액션을 취하게 된다.
시선 이동 패턴에 따라 버튼을 배치
흔한 실수 중에 하나는 버튼을 사용자의 자연스러운 시선 이동 경로에 반하여 배치하는 것이다. 사용자가 가장 먼저 인식하기를 원하기 때문에 가장 중요한 버튼을 먼저 배치한다. 그러나 사용자는 순서와 관계 없이 시각적으로 눈에 띄는 강도(visual weight)에 따라 버튼을 인식한다.
중요한 버튼을 첫번째로 배치하면 사용자의 시선을 자연스러운 방향을 방해하면서 위-아래가 아닌 아래-위로 이동시키게 된다.
사용자가 버튼을 다시 스캔하게 하지 말고, 한쪽 방향으로 시선을 이동시켰을 때 중요한 버튼에 도착하게 해야 한다. 이 방법은 사용자가 결정을 내리기 전에 모든 버튼 옵션을 스캔할 수 있도록 해 준다.
중요한 액션을 하단에 배치하면 시선 이동에 거의 저항이 없게 되어 사용자가 버튼을 빠르고 쉽게 누를 수 있도록 해 준다. 또한 하단의 위치는 손가락이 가장 닿기 쉬운 위치여서 효과를 더욱 증대시켜 준다.
형태가 있는 버튼으로 구분하라
또 흔히 실수하는 것 중 하나는, 버튼을 텍스트로만 표시하는 것이다. 중요하지 않은 버튼들을 텍스트 버튼으로 표시하곤 한다. 그러나 텍스트로 된 버튼은 버튼처럼 보이지 않기 때문에 사용자는 가장 중요하게 표시된 버튼 하나만 보게 되고 나머지 텍스트 버튼들은 그냥 지나치게 된다.
텍스트 버튼은 버튼인지 정보인지 잘 구분이 되지 않기 때문에 이 버튼들은 그냥 지나치게 된다.
텍스트 버튼은 터치할 수 있는 영역이 좁은 문제도 갖고있다.
버튼 모양 안에 텍스트 레이블을 적용해야 인지하기도 쉽고, 누르기도 쉬워진다.
순방향의 액션에는 컬러를 적용하라
곧바로 사용자의 목적을 수행하는 중요한 액션은 쉽게 구분해줄 수 있다. 나머지 액션들에 대해서는, 그 액션이 순방향으로 진행하게 하는 것인지, 역방향으로 진행하게 하는 것인지 고려해 봐야 한다.
예를 들면, '결재(Check out)'액션은 사용자의 목적을 바로 수행해 주기 때문에 중요도가 높은 액션이다. 그러나 '카트 보기'와 '계속 쇼핑하기'는 어느 것에 우선순위를 줘야할지 명확하지 않다.
'카트 보기'는 카트에 담아놓은 아이템들을 볼 수 있게 해주고, 이어서 체크아웃을 할 수 있게 해 준다. 그리고 '계속 쇼핑하기'는 제품 페이지로 되돌아가서 체크아웃과는 거리가 멀어지게 한다.
여기서 '카트 보기'가 중간정도의 중요도를 가진 액션이고, '계속 쇼핑하기'가 중요도가 낮은 액션임을 알 수 있다. 어느 액션이 사용자의 목적을 달성하는 방향으로 유도하고, 어느 액션이 반대 방향으로 유도하는지에 따라 중요도를 부여하면 된다.
순방향의 액션은 항상 역방향의 액션보다 중요도가 높다. 그러므로 순방향의 액션을 더 돋보이게 해야 하고 색상 대비를 높게 해야 한다.
색상 적용하는 것은 사용자의 주의를 끌 수 있기 때문에 순방향의 액션을 표시하기에 좋은 방법이다. 버튼 색상을 텍스트 색상과 동일하게 하면 대비가 약해 주의를 끌기 어렵다. 순방향의 액션에는 확실히 다른 색상을 적용해야 사용자가 취해야 할 액션을 확실히 느끼게 해줄 수 있다.
순방향의 액션에 모두 같은 색상을 적용하면 어떤 것이 더 중요한 액션인지 구분이 안된다. 색상(hue)을 다르게 사용하는 것도 다른 색상들이 무엇을 의미하는 것인지에 대한 혼란을 주게 되고, 시각적인 강도도 차이가 없게 된다.
이럴 때는 덜 중요한 액션에는 가장 중요한 액션에 사용된 색상과 동일한 색상을 사용하되 채도와 명도를 약하게 적용하는 것이다. 그렇게 되면 더 이상 두 버튼은 충돌하지 않고 중요도의 차이가 자연스럽게 느껴지게 된다.
대비를 더 강하게 하기 위해서, 중요 버튼에는 어두운 배경에 흰색 텍스트를, 그 다음으로 중요한 버튼에는 밝은 배경에 진한 텍스트를 적용해도 좋다.
텍스트 레이블의 굵기를 다르게 하라
중요도의 차이를 더 느끼게 해줄 수 있는 방법이 있다. 버튼들을 더욱 직관적으로 만들수록, 사용자를 덜 생각하게 만들 수 있다.
각 버튼에 같은 굵기의 버튼을 사용하면 같은 정도로 강조를 할 수 있다. 중요에 따라 텍스트 레이블의 강조를 다르게 하는 것이 좋다. 가장 중요한 버튼의 텍스트는 가장 굵게 하고, 가장 중요하지 않은 버튼의 텍스트는 덜 굵게 하라. 예시의 '3 items' 텍스트는 액션을 나타내는 내용이 아닌 부가 정보이기 때문에 얇게 적용하였다.
아이콘으로 중요도를 부여하라.
마지막 테크닉은 색맹인 사용자에게 필요한 것이기도 하다. 색맹인 사용자는 색상으로 버튼의 중요도를 구분하기 어렵기 때문에 또다른 시각적인 단서를 주어야 한다.
아이콘을 적용하여 중요도를 강조할 수 있다. 사용자가 내용을 스캔할 때 텍스트 보다는 아이콘 같은 시각적 요소에 시선이 멈추게 된다. 아이콘은 사용자가 다른 요소들보다 중요한 액션에 주의를 기울이게 만들어 준다.
당신의 버튼들은 직관적인가?
사용자가 화면을 오랜시간 보게 하거나, CTR(Click through rate)가 낮다면 직관적이지 않은 것이다. 그렇다면 CTA버튼에 이러한 기술을 사용해서 UX를 다듬어야 한다. 아래의 예시에서 큰 차이를 느낄 수 있을 것이다.
