leftvsright

콜투액션(CTA) 버튼의 위치

보통 많은 디자이너들이 콜투액션 CTA 버튼의 스타일에만 신경을 쓰고 실제 버튼 위치에 대해 간과할 때가 많다. CTA 버튼의 위치에 따라서 사용자의 사이트 페이지 안에서 참여도를 더욱 높일 수 있다. 사용자들이 처음 사이트 방문 시 페이지의 Focal Point 안에서 일정한 패턴으로 화면의 상단에 있는 히어로 섹션의 헤더 부분을 를 먼저 보는 경우가 대부분이다.

모르는 분들을 위해서 Focal point에 대해 간략히 설명하겠다. Focal Point의 큰 의미는 사이트의 제한된 화면 안에서 중점적으로 사용자에게 어필하는 콘텐츠를 이야기한다. 예를 들어 사용자의 이메일을 수집하는 모듈 안에서 Focal Point가 필요하다고 하면 보통은 이미지, 제목(header), 문단(paragraph), 그리고 마지막으로 이메일 수집을 위한 이메일 입력 필드(CTA 버튼)의 구성으로 이루어져 있을 것이다. Focal Point 관점에서 CTA 버튼이 사용자의 시선 경로에서 가장 마지막에 발견되면 보통은 사용자의 실제 참여도를 확률적으로 더 높일 수 있다는 연구결과가 있다.








구텐베르크 다이어그램


앞서 말했다시피 홈페이지 모듈들의 Focul Point는 종종 이미지, 제목(header), 문단(paragraph)등으로 이루어져 있는데 사용자가 앞서 언급된 콘텐츠를 읽어보고 전달하려는 내용을 이해했지만 만약 마지막에 CTA 버튼이 없다면 사용자들은 추가적인 액션을 취하지 못할 것이다. 그렇기 때문에 CTA 버튼은 사용자가 정보를 읽는 패턴에 따라 항상 터미널(Terminal Area)에 위치하는 것이 바람직하다.

터미널이란 구텐베르크 다이어그램에서 처음 쓰인 용어로 4가지 블록 중에 오른쪽 아래에 위치한 블록을 (이미지의 4번 블럭) 이야기한다. 구텐베르크 다이어그램에 관해 설명하자면 구텐베르크는 우리가 제한된 프레임 안에서 정보를 읽을 때 4개로 나뉜 블록에서 사람들의 시선이 일반적으로 상단 왼쪽부터 오른쪽으로 그다음 하단 왼쪽에서 오른쪽으로 알파벳 Z의 패턴으로 흐른다는 것이다.

그렇기에 보통 상단 왼쪽에는 가장 눈에 띄는 콘텐츠가 디스플레이되고 그다음부터는 추가적인 정보, 그리고 사용자는 그 정보들을 습득, 이해하고, 마지막으로 사용자가 결정을 내리기 위해 터미널 부분에 CTA 버튼을 배치하는 것이다. 또한 이러한 Z 패턴이 우리의 일반적인 시선 흐름의 패턴이어서 사용자가 버튼을 찾느라 헤매거나 하는 상황 없이 자연스럽게 바로 버튼을 찾을 수 있기에 매끄러운 사용자 경험을 만들 수 있다.

구텐베르크 다이어그램







좌측 아니면 우측?


앞서 말한것처럼 상당히 많은 웹사이트에 좌측에 CTA버튼이 위치해있는 경우를 보게된다. 좌측에 위치한 버튼은 사용자 시선의 동선 중간에 있기에 시선이 오래도록 머물러있기가 힘들다. 게다가 콜투액션을 보기위해 지나왔던 동선을 뒤로가서 다시한번 체크해야되기에 자연스러운 시선의 흐름을 방해한다.

하지만 버튼이 우측에 위치한다면 헤드라인, 문단, 이미지, CTA버튼의 순서로 자연스러운 Z패턴으로 시선의 동선이 움직이기에 더욱 사용자가 내용을 순차적으로 이해하기에도 좋고 마지막 터미널 지역에 위치한 버튼으로 사용자 시선이 좀더 정지되고 결과적으로 버튼을 누르게 만들 확률을 증가 시킬 수 있다.

어떻게보면 이 단순한 버튼의 위치만으로도 사용자의 참여도를 높일수있고, 그 작은 부분이 제품이나 서비스를 사용하는데 있어서 브랜드의 이익을 증대시킬 수 있는 가능성을 가지고 있기에 항상 디자이너는 이 부분을 고려하는 것이 중요하다.

좌측 버튼 vs 우측 버튼

SNS 공유하기

Share on facebook
Share on twitter
Share on linkedin

매주 주말마다 새로운 디자인 뉴스레터를 받아보세요 📪

Scroll to Top