brunch

You can make anything
by writing

C.S.Lewis

by nonem Dec 04. 2019

모바일 CTA 버튼을 위한 최적의 배치(번역)

원문 : https://uxmovement.com/mobile/the-optimal-placement-for-mobile-call-to-action-buttons/?fbclid=IwAR32dyvesLPEIwlTW3m3jPphz8Si4IxA6kV1Uq0wEySwrLDCN2n8Yz6BaaU

버튼 배치가 사용자의 작업 완료 속도에 영향을 준다는 것을 알고 계셨습니까? 사용자가 통화를 찾길 원하는 곳으로 통화 버튼을 배치하면 작업 완료가 빨라집니다. 사용자가 더 짧은 시간에 더 많은 작업을 완료하면 더 만족하게됩니다. 다음은 모바일 앱에서 사용할 수있는 모든 버튼 게재 위치에 대한 포괄적 인 분석입니다. 사용자가 자신의 작업을 더 빨리 완료 할 수 있도록 앱에 가장 적합한 버튼 배치를 알아보십시오.

Gutenberg Principle

사용자가 조치를 취하려면 먼저 화면을 스캔해야합니다. 화면 내용은 취할 조치에 대한 결정을 알려줍니다. 스캔이 끝나면 클릭 유도 문안이 제시되어야합니다. 그들이 끝나면 그들의 눈은 어디까지 끝나나요

그들은 좌상 구석에서 시작하여 오른쪽 아래에서 끝내며 지그재그로 눈을 움직입니다. 유명 신문 기자 인 에드먼드 아놀드 (Edmund Arnold)는이 자연 스캐닝 패턴을 구텐베르크 원칙 (Gutenberg Principle)이라고했습니다. 이 원리는 눈이 오른쪽 아래 모서리에 도달 할 때까지 방향 축을 따라 왼쪽에서 오른쪽으로 움직이는 방법을 보여줍니다. 독서 중력이라고하는 눈에 띄는 스캐닝 경로를 형성합니다. 대각선을 따라 놓인 디자인 요소가 가장 주목을받습니다. 그 바깥에있는 요소는 덜받습니다. 최적의 버튼 배치는 구텐버그 원리를 따른다. 조치를 취할 준비가되면 사용자의 스캐닝 경로 끝에 버튼을 배치해야합니다. 사용자가 검색하기 전에 조치를 취할 준비가되어있는 경우는 거의 없지만 화면 콘텐츠에 이미 익숙한 경우에만 해당됩니다.

Top Vs. Bottom Button

처음 결정할 위치는 화면 상단이나 하단에 전화 버튼을 배치 할 것인지 여부입니다. 어떤 버튼 배치가 구텐베르크 원리를 따른 것입니까? 대부분의 사용자는 자신의 작업과 관련이 있고 화면을 지배하기 때문에 먼저 콘텐츠를 검색합니다. 그들의 눈은 화면의 위쪽 절반에서 아래쪽으로 움직입니다. 콘텐츠가 끝나면 클릭 유도 문안을 찾고 있습니다. 그들의 눈은 그들이 찾을 수 없을 때까지 버튼을 찾는 것처럼 바닥에 남아 있습니다. 그 때 그들이 화면의 상단에 눈을 스크램블하고 오른쪽 상단 모서리에 그것을 비틀 때

상단에있는 클릭 유도 문안 버튼을 배치하면 사용자가 콘텐츠 스캔을 마친 후에보고 싶을 것이므로 혼란 스럽습니다. 상단 버튼 배치는 자연스러운 스캐닝 흐름에 대항하여 완료 경로에서 멀리 떨어 뜨립니다. 뿐만 아니라 상단 버튼도 화면 제목과 공간을 공유해야하기 때문에 하단 버튼보다 작습니다. 어색한 배치와 결합 된 작은 크기는 상단 버튼을 찾기가 더 어려워지고 탭할 때 더 느려집니다. 하단에있는 클릭 유도 문안 버튼을 배치하면 사용자가 더 빨리 도달 할 수 있습니다. 그들은 과도한 안구 운동을 사용하지 않고 내용을 스캔 한 직후 버튼을 보게됩니다. 하단 버튼은 구텐베르크 법칙과 일치 할뿐만 아니라 더 크고 쉽게 도달 할 수 있습니다.

Item Selection

맨 위 버튼이 의미를 갖는 유일한 시간은 사용자가 화면에서 항목을 선택할 때입니다. 예를 들어 사용자가 표 행을 선택하면 앱 표시 줄이 변경되어 선택한 항목에 대한 관련 작업이 제공됩니다. 화면 제목이 사라지고 선택한 항목 수가 표시됩니다.

상단 버튼은 이미지 내용 선택에도 적용됩니다. 이 컨텍스트에서 상위 버튼을 사용하면 사용자가 앱 표시 줄에서 상태가 변경된 것을 더 빨리 알 수 있습니다. 상태 제목과 버튼의 근접성은 사용자의 눈이 멀리 떨어져 있지 않아도된다는 것을 의미합니다.

Horizontal Buttons

버튼을 아래쪽으로 정렬 할 수있는 몇 가지 방법이 있습니다. 한 가지 방법은 가로로 나란히 정렬하는 것입니다. 이 배열은 두 가지 다른 동작 사이의 관계를 강조하려는 경우 이상적입니다. 사용자가 세트로 보게하고 양쪽 모두를 똑같이 고려하게합니다.

이 예에서 앱은 가로 단추를 사용하여 사용자가 구매하기 전에 신발 디자인을 수정할 수 있음을 알립니다. 나란히 배치하면 두 작업 사이의 관계가 강화됩니다. 신발을 사고 디자인을 편집하는 것이 고객 만족을 위해 똑같이 중요하기 때문에 형제와 같이 쌍을 이룹니다. 이렇게하면 사용자는 구매를 서두르면 '디자인 수정'버튼을 간과하지 않습니다.

Right Vs. Left Primary Action

수평 버튼의 경우 기본 동작을 왼쪽 또는 오른쪽으로 배치 할 수 있습니다. 하지만 어떤 배치를 통해 사용자는보다 신속하게 행동을 취할 수 있습니까?

기본 동작이 왼쪽에있을 때 중력 읽기에 반대합니다. 사용자의 눈은 오른쪽 아래로 이동하려고하지만 버튼의 가시적 인 무게로 인해 왼쪽 하단에 고정됩니다. 고정 후에는 오른쪽 아래로 이동하여 왼쪽으로 돌아가 주 버튼을 누릅니다. 결과적으로, 사용자의 눈은 앞뒤로 스윕 (sweep)하여 사용자의 작업 시간을 증가시킵니다. 기본 동작이 오른쪽에있을 때 버튼은 읽기 중력이 끝나는 곳이므로 작업 완료가 빨라집니다. 사용자는 스캔 흐름을 되돌 리거나 기본 작업에서 여러 번 고정 할 필요가 없습니다.

Vertical Buttons

단추를 정렬 할 수있는 또 다른 방법은 세로로 스택하는 것입니다. 사용자가 각 작업에 개별적으로 집중하기를 원하면이 배치가 이상적입니다. 좀 더 세심한 배려를하기 위해 각 버튼에 더 오래 고정시킬 수 있습니다.

세로 단추는 화면 너비를 확장하는 데 더 많은 공간이 있으므로 가로 단추보다 두드러집니다. 크기가 커지면 버튼을 누르기가 쉬울뿐만 아니라 기본 동작이 가장 잘 보입니다. 예에서 기본 작업은 '장바구니에 추가'버튼입니다.이 버튼은 '선물 메시지 추가'버튼보다 중요합니다. 수직 단추로 정렬하면 보조 동작이 경쟁하지 않습니다.

Top Vs. Bottom Primary Action

기본 행동이 위 또는 아래로 가야합니까? 구텐베르크 법칙 (Gutenberg Principle)은 독서 중력이 하향 방향으로 흐를 것을 지시합니다. 아래쪽 버튼을 사용하면 사용자가 아래쪽으로 만 스캔하여 더 빨리 이동할 수 있습니다. 상단에있을 때 사용자는 아래로 스캔 한 다음 위로 탭해야합니다.

Hybrid Buttons

마지막 버튼 정렬은 수평 및 수직 버튼의 하이브리드입니다. 최소한 세 개의 버튼이있는 경우이 방법을 사용하십시오. 처리 할 정보가 더 많으므로 사용자는 3 개의 단추를 사용하여 결정하는 시간이 길어집니다. 그러나 이러한 배치는 시각적 계층 구조로 의사 결정 시간을 단축시킵니다. 매번 레이블에 의존하는 대신 사용자는 단추의 크기 및 방향 큐를보고 각 동작을 호출 할 수 있습니다.

이 예에서 기본 동작은 큰 녹색 버튼입니다. 동일한 크기 또는 색상의 다른 버튼이 없기 때문에 쉽게 찾아 낼 수 있습니다. 그런 다음 사용자는 한 동작을 가장 왼쪽 버튼으로 연결하고 다른 동작은 가장 오른쪽 버튼과 연결할 수 있습니다. 사용자가 버튼을 누르는 빈도가 높을수록 크기와 방향에 따라 어떤 동작이 이루어지는 지 알게됩니다. 곧 그들은 사고없이 행동을 취할 수있는 습관을 개발할 것입니다.

Primary Action at the Bottom

중력을 읽으면 기본 동작이 아래쪽으로 가고 보조 동작이 위쪽으로 이동하도록 지시됩니다. 우선 순위가 높은 버튼은 가장주의를 기울여야하며 사용자의 스캔 흐름이 끝날 때까지 진행해야합니다.

2 차 행동은 별개의 색을 나타내지 않아야하며 그렇지 않으면 기본 행동과 경쟁하게됩니다. 대신 둘 다 윤곽선 또는 밝은 음영 단추 스타일로 중립 색상을 가져야합니다. 세로 단추와 나란히 정렬 할 필요가 없습니다. 오프셋을 수직 모서리에 맞추면 왼쪽 및 오른쪽 방향이 강조됩니다.

Sticky Buttons

항상 사용자가 클릭 유도 문안을 볼 수있게 해주는 기술은 스티커 단추를 사용하는 것입니다. 버튼은 화면 하단에 고정되어있어 사용자가 스크롤하는 곳 어디에서나 조치를 취할 수 있습니다.

이 끈적한 버튼을 네이티브 앱에 유리하게 사용하고 브라우저 기반 웹 앱에서는 사용하지 마십시오. 웹 앱의 끈적한 버튼은 사용자가 버튼을 타겟팅 할 때 브라우저 바가 튀어 나와 탭핑 문제를 일으 킵니다. 이 문제에 대한 해결 방법이 있지만 복잡합니다. 가장 자연스러운 해결책은 버튼과 브라우저 막대 사이에 여분의 패딩을 추가하는 것입니다.