CTA버튼의 최적의 위치
Optimal Placement for Mobile Call to Action Buttons
버튼의 배치는 사용자가 테스크를 수행하는 속도에 영향을 미친다. 사용자가 기대하는 곳에 CTA(Call to Action)버튼을 배치하면 사용자는 테스크를 빨리 수행할 수 있다. 사용자는 짧은 시간에 테스크를 수행할 수록 더욱 만족하게 된다.
모바일앱에서 사용할 수 있는 버튼 배치에 대해 알아보고 어떤 배치가 사용자가 테스크를 빨리 수행하게 만드는지 배워보자.
Gutenberg Principle
사용자는 액션을 수행하기 전에 화면을 스캐닝 한다. 화면의 내용은 수행할 액션에 대한 정보를 알려준다. 스캐팅을 마치자 마자 CTA버튼은 바로 눈에 띄어야 한다. 스캐닝이 끝났을 때 시선이 마지막으로 머무르는 곳은 어디인가?
시선의 이동은 좌측 상단에서 출발해서 지그재그로 이동하다가 우측 하단에서 끝난다.이러한 자연스러운 스캐닝 패턴을 구텐베르크 원리(Gutenberg Principle)라고 한다.
구텐베르크 원리는 시선이 축(Axis)을 따라 왼쪽에서 오른쪽으로 이동하면서 우측 하단에 도달한다는 것을 보여준다. 대각선 방향의 주변에 위치한 디자인 요소가 가장 눈에 띌 수 있으며, 그 밖의 위치에 놓인 요소들은 눈에 잘 띄지 않게 된다.
최적의 버튼 위치도 구텐베르크 원리를 따른다. 사용자가 액션을 실행할 준비가 되었을 때 버튼은 사용자의 스캐닝 경로에 위치해야 한다. 많이 보아서 익숙한 화면이 아니라면 사용자가 화면을 스캐닝하지 않고 액션을 수행하는 경우는 거의 없다.
Top Vs. Bottom Button
우선 CTA버튼을 상단 아니면 하단 중 어느 곳에 위치할 것인지를 결정해야 한다. 어느 곳이 구텐베르크 원리에 맞는 위치일까?
대부분의 사용자는 화면 안의 컨텐츠가 수행하려는 테스크에 대한 내용과 관련이 있고, 눈에 잘 띄기 때문에 컨텐츠를 먼저 스캔한다. 사용자는 시선은 상단의 약간 아래 부분부터 시작해서 하단까지 이동한다. 컨테츠가 끝나는 부분에서, CTA버튼을 찾는다.
CTA버튼을 찾지 못했다면 시선은 하단에 머무르게 된다. 그리고나서 시선은 CTA버튼을 찾아 스크린 우측 상단으로 건너뛰게 된다.
사용자는 콘텐츠 스캐닝이 끝나면 바로 CTA버튼을 볼 수 있기를 기대하기 때문에 CTA버튼을 상단에 배치하는 것은 사용자를 혼란스럽게 만든다. 상단에 위치한 버튼은 자연스러운 스캐닝 흐름을 거스르면서 테스크를 완료하는 방향을 갑자기 바꾸게 만든다.
뿐만 아니라, 상단의 버튼은 화면 제목과 공간을 같이 사용해야 하기 때문에 하단의 버튼보다 크기가 작아지게 된다. 애매한 장소에 작은 크기가 더해져 찾기 힘들게 되고 빨리 누를 수 없게 된다.
CTA버튼을 하단에 배치하면 사용자는 빨리 찾을 수 있다. 사용자는 콘텐츠를 스캐닝한 직후 눈을 더 이상 움직이지 않고 버튼을 바로 찾을 수 있다. 하단 버튼은 구텐베르크 원리에 합당할 뿐 아니라 크기도 크기 때문에 찾기가 쉽다.
아이템 선택
상단 버튼이 유용한 유일한 경우는 사용자가 아이템을 선택하려 할 때이다. 예를 들면, 사용자가 리스트의 한 행을 선택하면, 앱바는 아이템 선택과 관련된 액션들을 제공한다. 화면 제목이 사라지고, 선택된 아이템의 갯수가 나타난다.
상단 버튼은 이미지 콘텐츠를 선택하는 경우에도 적용될 수 있다. 이러한 상황에서 상단 버튼을 사용하면 사용자가 상단 앱바의 상태가 변경된 것을 인지한 후에 빠르게 상단 버튼을 같이 사용할 수 있다. 타이틀과 버튼이 근접해있다는 것은 사용자의 시선이 다른 곳으로 돌아다니지 않아도 된다는 것을 의미한다.
Horizontal Buttons
하단에 버튼을 배열하는 몇 가지 방식이 있다. 한 가지는 수평으로 나란히 배열하는 것이다. 이 방법은 두 가지 다른 액션의 관계를 강조하는데 유용하다. 사용자는 두 개 버튼을 하나의 셋트로 보고 동등하게 주의를 기울이게 된다.
예시에서, 수평으로 배열된 버튼들은 사용자가 구매하기 전에 디자인을 수정할 것인지 생각하게 만들어 준다. 나란히 배열함으로써 두 가지 액션의 관계를 강화시키는 것이다.
신발을 구매하는 것과 디자인을 수정하는 것이 고객의 만족에 있어 동등하게 중요하기 때문에, 두 버튼은 나란히 쌍으로 배열되었다. 이러한 방법으로 사용자가 급하게 구매를 서두면서 "Edit design'버튼을 지나치지 않게 할 수 있다.
Right Vs. Left Primary Action
주요 액션을 좌측에 배치할지 우측에 배치할지의 문제가 남아있다. 어느 곳이 사용자가 빨리 액션을 취할 수 있게 만들어줄까?
주요 액션이 좌측에 있으면, 보는 순서를 역행하게 만든다. 그리고 사용자의 시선은 상단에서 우측 하단으로 향하게 되어있지만 좌측 하단 버튼의 시각적 무게중심이 시선을 좌측으로 고정시키려 한다. 시선이 좌측 하단의 메인 액션에 머무르고 나서, 시선은 우측으로 갔다가 메인 버튼으로 다시 돌아오게 된다. 결과적으로 사용자의 시선은 좌우측을 왔다 갔다 하게 되며, 테스크를 수행하는 시간이 더 들게 된다.
주요 액션 버튼이 우측에 있으면, 시선의 무게중심이 끝나는 곳에 주요 액션 버튼이 위치하기 때문에 테스크를 빨리 수행할 수 있게 된다. 사용자는 시선을 거꾸로 이동하지 않아도 되고, 시선을 한 번만 고정시키면 되기 때문이다.
Vertical Buttons
버튼을 수직으로 쌓아서 배열할 수도 있다. 이 방식은 각각의 액션에 개별적으로 집중시키려 할 때 유용하다. 각각의 버튼에 좀더 오래 시선을 머무르게 하고 좀더 생각을 할 수 있게 해 준다.
수직으로 배열된 버튼은 화면을 가로지르면서 많은 공간을 차지하고 있기 때문에 수평으로 배열된 버튼보다 눈에 띈다. 크기가 큰 버튼은 누르기 쉬울 뿐 아니라, 주요 액션 버튼을 좀 더 잘 보이게 만들어준다.
예시의 주요 액션은 "Add to cart"버튼이고, "Add gift message"보다 중요한 버튼이다. 수직으로 배열함으로써 "Add to cart"버튼을 강조하고 있어 보조 액션과 부딪히지 않는다.
Top Vs. Bottom Primary Action
주요 액션 버튼은 위로 가야 할까 아래로 가야 할까? 구텐베르크의 원리는 읽기의 중력은 아랫방향을 향한다고 한다. 하단 버튼은 사용자가 아랫방향으로 스케닝하기만 하면 주요 버튼에 쉽게 도달할 수 있도록 해준다. 주요 액션 버튼이 상단에 있다면, 사용자는 아래로 스캔했다가 위로 시선을 이동하여 버튼을 선택해야 한다.
Hybrid Buttons
마지막 버튼 배열 방식은 수평과 수직이 섞인 하이브리드 방식이다. 버튼이 세개 이상이라면 이 방식을 사용한다.
세 개의 버튼은 생각해야 할 정보를 많이 제공하기 때문에 사용자가 결정을 하는데 많은 시간이 들게 한다. 그러나 아래와 같은 배열로 시각적인 계층을 만들어 생각하는 시간을 줄여줄 수 있다. 레이블을 일일히 읽어보는 대신, 사용자는 버튼의 크기와 방향으로도 필요한 액션을 유추할 수 있다.
예시에서 주요 액션은 큰 녹색 버튼으로 적용되어 있다. 똑같은 크기나 색상의 버튼이 없기 때문에 시선을 집중하기 쉽다. 사용자는 한 액션은 좌측 버튼에, 또 다른 액션은 우측 버튼에 있는 것으로 연관지어 생각할 수 있다.
사용자는 버튼을 자주 누르면서 어떤 액션이 어떤 크기와 방향의 버튼에 배치되어 있는지 학습을 하게 된다. 그러면서 사용자는 생각하지 않고 버튼의 크기와 방향만 인지하면서 액션을 수행할 수 있게 된다.
Primary Action at the Bottom
읽기의 중력은 주요 액션을 아래에, 보조 액션을 그 위에 배치하도록 만든다. 주요 버튼은 시선이 가장 집중이 되어야 하며, 사용자의 시선 흐름의 마지막에 위치해야 한다.
보조 액션은 주요 액션과 부딪히지 않기 위해 눈에 띄는 색상을 사용하면 안된다. 외곽선이나 옅은 무채색을 적용하는 것이 적당하다.
Sticky Buttons
Sticky button은 사용자에게 주요 액션 버튼을 항상 노출시키는 방법이다. 화면을 스크롤하여도 항상 나타나 있도록 버튼이 화면의 하단에 고정되어 있다.
네이티브 앱에는 사용해도 좋지만, 브라우저 기반의 웹 앱에는 사용하지 않는 것이 좋다. 웹 앱에서 Sticky button은 브라우저의 하단 바에 인접해 있어서 브라우저 바를 잘못 누르는 경우가 많기 때문이다. 주요 액션 버튼과 브라우저 바 사이에 추가의 여분을 적용하여 이 문제를 해결할 수도 있다.
자연스러운 흐름을 따라라
Call to action button은 사용자가 테스크를 수행하기 위한 마지막 단계이다. 어디에 위치하느냐에 따라 테스크를 수행하는 시간을 빠르게 만들 수도, 느리게 만들 수도 있다. 구텐베르크의 원리에 따라 배치하여 쉽게 선택할 수 있도록 만들어라. 그렇게 하면 당신의 call to action button은 시선의 흐름에 맞는 최적의 위치에 위치하게 될 것이다.
원문 출처 : https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/
