2019. 8. 6. 08:50ㆍMobile
버튼을 놓는 위치가 사용자의 작업 완료 속도에 영향을 준다는 것을 아십니까?
작업 완료 시간이 빠를수록 만족도가 높아진다.
만약 이것이 당신이 원하는 것이라면, 당신은 당신의 버튼을 사용자가 찾을 것으로 기대하는 곳에 놓아야 한다.
여기에 당신이 사용할 수 있는 모든 버튼 배치의 포괄적인 분석이 있다. 어떤 버튼 배치가 앱에 가장 적합한지 확인하여 사용자가 시간을 낭비하지 않도록 하십시오.
구텐베르크 원리
사용자가 조치를 취하기 전에 화면을 스캔해야 한다. 화면 내용은 어떤 조치를 취해야 할지에 대한 결정을 알려준다. 그들이 스캔을 마치자마자, 행동의 부름이 스스로 나타나야 한다. 그들의 눈은 끝내면 결국 어디로 가는 것일까?
알고 보니 왼쪽 위 코너에서 시작해 오른쪽 아래까지 지그재그로 눈을 움직이며 마무리된다. 유명한 신문 디자이너 에드먼드 아놀드는 이 자연 스캐닝 패턴을 구텐베르크의 원리라고 불렀다.
원리는 눈이 오른쪽 아래 모서리에 도달할 때까지 방향의 축을 따라 왼쪽에서 오른쪽으로 어떻게 움직이는지를 보여준다. 그것은 읽기 중력이라고 불리는 눈에 띄는 스캐닝 경로를 형성한다. 대각선을 따라 놓여 있는 디자인 요소가 가장 많은 관심을 받는다. 밖에 있는 요소들은 적게 받는다.
최적의 버튼 배치는 구텐베르크 원리에 따른다. 사용자가 작업을 수행할 준비가 되었을 때 검색 경로의 끝에 버튼을 놓아야 한다. 사용자가 스캔하기 전에 조치를 취할 준비가 되어 있는 경우는 드물지만, 이것은 화면 내용에 이미 익숙할 때만 가능하다.
상단 Vs 하단 버튼
가장 먼저 결정해야 할 위치는 화면 맨 위나 아래쪽에 있는 실행 버튼을 놓을지 여부다. 구텐베르크 원리에 따른 단추 배치는?
대부분의 사용자는 자신의 작업과 관련이 있고 화면을 지배하기 때문에 먼저 콘텐츠를 스캔하는 것으로 시작한다. 그들의 눈은 화면의 위쪽 절반에서 아래쪽 방향으로 움직인다. 그 내용이 끝나면, 그들은 행동요구를 찾고 있다.
그들은 단추 하나를 찾을 수 없을 때까지 단추를 찾고 있기 때문에 눈은 아래쪽에 남아 있다. 그때 그들은 화면 꼭대기까지 눈을 부릅뜨고 오른쪽 상단 모서리에서 그것을 더듬어 본다.
콜 투 액션 버튼을 맨 위에 놓는 것은 사용자가 콘텐츠 스캔을 마친 후 이를 볼 것으로 예상하기 때문에 사용자들을 혼란스럽게 한다. 상단 버튼 배치는 자연스러운 스캐닝 흐름에 역행하여 완성 경로에서 벗어나게 한다.
그뿐만 아니라 상단 버튼도 화면 제목과 공간을 공유해야 하기 때문에 하단 버튼보다 작다. 어색한 배치와 결합된 작은 사이즈로 상단 버튼은 찾기 어렵고 탭하는 속도가 느려졌다.
당신이 당신의 콜 투 액션 버튼을 맨 아래에 놓았을 때, 사용자들은 그것에 더 빨리 접근할 수 있다. 그들은 과도한 눈 움직임 없이 내용을 스캔한 후 바로 버튼을 볼 수 있었다. 하단 버튼은 구텐베르크 원리와 정렬되어 있을 뿐만 아니라, 더 크고 손이 닿기 쉽다.
항목 선택
상단 버튼이 이치에 맞는 유일한 시간은 사용자가 화면에서 항목을 선택할 때뿐입니다. 예를 들어 사용자가 테이블 행을 선택하면 앱 막대가 변경되어 선택한 항목에 대한 관련 작업을 제공한다. 화면 제목이 사라지고 선택한 항목 수가 나타난다.
상단 버튼은 영상 콘텐츠 선택에도 적용된다. 이 컨텍스트에서 상단 버튼을 사용하면 사용자가 앱 바의 상태 변화를 감지한 후 더 빨리 조치를 취할 수 있다. 버튼이 상태 제목에 근접했다는 것은 사용자의 눈이 멀리 떨어지지 않아도 된다는 것을 의미한다.
수평 버튼
아래쪽에 단추를 배열할 수 있는 몇 가지 방법이 있다. 한 가지 방법은 그것들을 수평으로 나란히 정렬하는 것이다. 이 배열은 두 가지 다른 행동 사이의 관계를 강조하고 싶을 때 이상적이다. 그것은 사용자들로 하여금 그들을 집합으로 보게 하고 두 가지 모두에 대해 동등한 고려를 하게 한다.
예를 들어, 앱은 수평 버튼을 사용하여 사용자가 신발을 사기 전에 신발을 디자인할 수 있다는 것을 알 수 있도록 한다. 나란히 배치하면 두 행동 사이의 관계가 강화된다.
신발을 사고 디자인을 편집하는 것도 고객 만족을 위해 똑같이 중요하기 때문에, 그들은 형제처럼 짝을 이룬다. 이런 식으로, 사용자들은 그들이 구매를 서두르면 "디자인 편집" 버튼을 간과하지 않을 것이다.
오른쪽 Vs 왼쪽
수평 버튼의 경우 기본 동작을 왼쪽 또는 오른쪽에 배치할 수 있다. 그러나 어떤 배치를 통해 사용자가 더 빨리 조치를 취할 수 있는가?
일차 작용이 왼쪽에 있을 때, 그것은 읽는 중력에 반하는 작용을 한다. 사용자의 눈은 오른쪽 하단을 향해 움직이기를 원하지만, 버튼의 시각적 무게로 왼쪽 하단에 고정되어 있다. 고정 후에는 오른쪽 하단으로 이동하다가 왼쪽으로 돌아가 메인 버튼을 누른다. 그 결과, 사용자의 눈은 앞뒤로 스위프 되어 사용자의 작업 시간이 증가한다.
기본 동작이 오른쪽에 있으면 버튼이 판독 중력이 끝나는 지점이기 때문에 작업 완료 속도가 빨라진다. 사용자는 스캐닝 흐름을 한 번 이상 되돌리거나 기본 동작에 고정할 필요가 없다.
수직 버튼
버튼을 배열할 수 있는 또 다른 방법은 세로로 쌓는 것이다. 이 배열은 사용자가 각 동작에 개별적으로 집중하기를 원하는 경우에 이상적이다. 당신은 그들이 좀 더 세심한 배려를 위해 각각의 버튼을 더 길게 고정시키도록 할 것이다.
수직 버튼은 화면의 폭을 넓힐 수 있는 공간이 더 넓기 때문에 수평 버튼보다 더 두드러진다. 크기가 클수록 버튼을 누르기 쉬워질 뿐만 아니라 기본 동작이 가장 잘 보일 수 있다.
예에서 1차 동작은 "카트에 추가" 버튼으로, "선물 메시지 추가" 버튼보다 더 중요하다. 그것을 세로 단추로 배열하는 것은 그것을 강조하기 때문에, 2차적인 조치는 경쟁하지 않는다.
상단 Vs 하단 기본 작업
1차 조치는 상단으로 가야 하는가, 하단으로 가야 하는가? 구텐베르크 원리는 읽는 중력이 아래쪽으로 흐른다고 지시한다. 아래쪽 버튼은 아래쪽으로만 스캔하면 사용자가 더 빨리 접근할 수 있게 해준다. 맨 위에 있을 때, 사용자들은 그것을 누르기 위해 아래를 스캔하고 위쪽으로 스캔해야 한다.
하이브리드 버튼
마지막 버튼 배열은 수평 버튼과 수직 버튼의 혼합물이다. 버튼이 3개 이상 있는 경우 이 방법을 사용하십시오.
처리할 정보가 더 많기 때문에 사용자가 결정하는 데 세 개의 버튼이 더 오래 걸린다. 그러나 이러한 배열은 시각적 계층구조로 그들의 의사결정 시간을 단축시킨다. 사용자는 매번 라벨에 의존하지 않고 버튼의 크기와 방향 단서를 보고 각 동작을 호출할 수 있다.
이 예에서, 주된 동작은 큰 녹색 버튼이다. 크기나 색상이 같은 다른 버튼이 없기 때문에 쉽게 발견할 수 있다. 그런 다음 사용자는 한 동작을 가장 왼쪽 버튼으로, 다른 동작을 가장 오른쪽 버튼으로 연결할 수 있다.
사용자가 버튼을 자주 누를수록 크기와 방향별로 어떤 동작을 배우게 된다. 곧 그들은 생각 없이 행동을 취할 수 있도록 도와주는 습관을 기를 것이다.
맨 아래에 있는 기본 작업
중력을 읽는 것은 1차 작용이 하단에 있고 2차 작용이 그 위에 있다는 것을 지시한다. 높을수록 우선 순위 버튼과 사용자의 스캐닝 흐름의 끝에 가야 하는 가장 주목이 필요하다.
이차적인 행동은 뚜렷한 색을 띠지 않아야 하며, 그렇지 않으면 일차적인 행동과 경쟁하게 될 것이다. 대신, 둘 다 윤곽이 잡히거나 밝은 음영 버튼 스타일로 중성 색상을 가져야 한다.
수직 버튼과 같은 높이로 정렬할 필요는 없다. 이들을 수직 가장자리와 간격띄우기 정렬하면 좌우 방향이 강조된다.
스티키 버튼(Sticky button : 고정된 버튼)
사용자가 항상 통화할 수 있도록 하는 기법은 스티키 버튼을 사용하는 것이다. 버튼은 화면 하단에 고정되어 있어 사용자가 스크롤하는 곳마다 조치를 취할 수 있다.
이러한 스티키 버튼을 사용하여 네이티브 앱에서 원하는 대로 하십시오. 그러나 브라우저 기반 웹 앱에서는 사용하지 마십시오. 웹 앱의 버튼이 고정되면 사용자가 버튼을 타겟으로 할 때 브라우저 바가 튀어나오기 때문에 탭핑 문제가 발생한다.
이 문제에 대한 해결책이 있지만, 그것들은 복잡하다. 가장 자연스러운 해결책은 버튼과 브라우저 바 사이에 여분의 패딩을 추가하는 것이다.
흐름과 함께 이동
Call to Action 버튼은 사용자가 성공하기 위한 마지막 단계다. 당신이 어디에 위치하는지는 그들의 일을 더 빠르거나 더 느리게 만들 수 있다. 구텐베르크 원리에 맞추어 배치하여 쉽게 접근할 수 있도록 한다. 그렇게 할 때, 당신의 행동 호출 버튼은 흐름과 일치하는 최적의 위치를 갖게 될 것이다.
출처 : https://uxmovement.com/mobile/the-optimal-placement-for-mobile-call-to-action-buttons/
'Mobile' 카테고리의 다른 글
| iOS / Android UI 기본 용어 비교 (0) | 2019.08.06 |
|---|---|
| 모바일에서 메뉴가 화면 하단에 위치하는 이유 (0) | 2019.08.05 |
| 사용자의 아이콘 매핑을 방지하는 방법 (0) | 2019.08.05 |