brunch

매거진 디자인 뉴스레터 디독

라이킷 72 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 Apr 13. 2019

OK 버튼은 왜 오른쪽에 있을까?

1. 플랫폼은 일관적이지 않다.

많은 사람들이 플랫폼 규칙을 따른다고 말했다. 이것이 그 문제를 해결해줄 것처럼 보이지만, 실제로 그렇지 않다. 어떤 배치가 사용자에게 더 잘 작동하는지, 왜 그런지 알려주지 않는다. 일관성을 위해 플랫폼 규칙을 따르겠다는 것은 충분하지 않고 디자이너들은 빈 손으로 남겨둔다.

‘일관성'은 디자이너들 사이에서 많이 쓰는 단어다. 사용자가 직면한 디자인 문제에 대해 깊이 생각하지 않아도 되는 핑계로도 많이 쓰인다. 디자인 규칙을 왜 따르는지 모르면 어떤 이점이 있을까?

어떤 디자인 규칙이 사용자에게 해로울 때는 어떻게 해야 할까? 일관성을 위해 무조건 따라야 할까? 디자이너가 모든 문제를 해결하는 방법으로 플랫폼 디자인 규칙을 이용한다는 이유로 안 좋은 디자인 규칙을 계속 써야 할까?

사용자를 위해 널리 사용되는 특정 플랫폼 디자인 규칙이 있다. 하지만 여기서 중요한 것은 플랫폼 디자인의 일관성이 디자이너의 유일한 해결책이 되어서는 안 된다. 다른 방법과 달리 한 가지 방법으로 사용자 인터페이스를 디자인해야 하는 이유를 이해하는 것이 중요하다.

2. 버튼 배치 문제

어떤 사람은 액션 버튼에 시각적인 무게와 명확하고 뚜렷한 라벨을 주는 것이 배치보다 중요하다고 말할 수 있다. 액션 버튼의 시각적인 무게와 라벨은 고려되어야 할 중요한 디자인 요소지만, 유일한 측면은 아니다.

하나의 디자인 측면에만 초점을 맞추고 다른 디자인 측면은 초점을 맞추지 않는 것은 부주의한 디자이너들이 하는 행동이다. 세심한 디자이너들은 모든 디자인 요소가 사용자에게 어떤 영향을 미칠지 생각할 것이다. 어떻게 주요 작업과 보조 작업이 배치되는지 보여주는 것은 디자이너가 알아내기 힘들어하는 것이다. 그래서 ‘Ok/취소' 버튼 논쟁이 디자이너 사이에서 인기 있는 것이다.

3. 왜 ‘OK’ 버튼은 오른쪽에서 잘 작동할까?

플랫폼에 대해 이야기한 후, 어디에 배치하는 것이 가장 좋을지 의문을 갖게 될 것이다. 디자인이 사용자에게 어떤 영향을 미치는지 분석함으로써 이 문제를 해결할 수 있다.

3.1 덜 시각적인 고정

디자이너의 일반적인 가정이 사실인지 확인해야 한다. 일부 디자이너들은 보조 액션보다 주된 액션을 왼쪽에 두는 것이 더 가깝고 클릭하는 시간이 적기 때문에 사용자에게 더 좋을 것이라고 생각한다.

말은 되지만, 사용자가 어떤 행동을 하기 전에 모든 옵션을 본다는 사실을 무시할 수 없다. 즉, 대부분의 사용자가 옆에 있는 보조 액션 버튼을 보지 않고 주된 액션 버튼을 맹목적으로 클릭하지는 않을 것이다.

먼저 왼쪽에서 주된 액션 버튼을 보고, 오른쪽에서 보조 액션을 보게 될 것이다. 그러고 나서 다시 클릭하려고 주된 액션으로 시선을 옮길 것이다. 이렇게 하게 되면 여러 가지 방향으로 3번 시각적 고정이 이뤄진다.

‘OK’ 버튼이 왼쪽 있을 때, 시각적인 고정이 더 많아지고, 여러 가지 방향으로 흐른다.

‘OK’ 버튼이 오른쪽에 있을 때, 시각적인 고정이 줄어들고, 한 방향으로 흐른다.

대화 박스에 오른쪽에 있는 주된 액션과 왼쪽에 있는 보조 액션을 비교해보자. 사용자는 보조 액션을 먼저 보고, 주된 액션으로 시선을 옮겨 버튼을 클릭한다. 이렇게 하면 한 방향으로 두 개의 시각적 고정이 이뤄지므로 더 빠른 시각적 흐름을 줄 수 있다.

사용자는 각 버튼을 한 번씩 보고, 주된 액션 버튼에서 시선이 끝난다. 주된 액션을 왼쪽에 두면, 더 쉽게 도달할 수는 있지만, 정신적인 프로세스와 시각적인 고정의 관점에서 주된 액션을 오른쪽에 두는 게 실제로 더 빠르다.

3.2 예상되는 버튼 기능 발견

사용자가 보조 액션 버튼을 클릭할 때, 아무것도 하지 않고 원래 화면으로 돌아간다고 생각한다. 즉 ‘취소' 버튼은 ‘뒤로 돌아가기' 버튼과 같은 기능을 한다.

주된 액션 버튼을 클릭할 때는, 버튼이 말하는 동작을 수행한 후, 다음 화면으로 넘어간다고 생각한다. 즉 ‘OK’ 버튼은 ‘다음'버튼과 같은 기능을 한다. 보조 액션 버튼을 왼쪽에 놓고, 주된 액션 버튼을 오른쪽에 놓는 것은 사용자가 ‘뒤로 가기'와 ‘다음' 버튼 기능으로 예상할 수 있다.

이는 페이지 번호를 매기는 버튼을 두는 방법과 비슷하다. 사용자를 다음 페이지로 이동하는 버튼은 오른쪽에 있고, 전 페이지로 돌아오게 하는 버튼은 왼쪽에 있다.

이 버튼은 왼쪽에서 오른쪽으로 읽는 방향과 와 탐색 방향에 매핑되기 때문에 작동하는데, 여기서 오른쪽은 진행 방향이고 왼쪽은 후퇴 방향이다.

‘OK’는 사용자를 다음 화면으로 진행시키고, ‘취소'는 원래 화면으로 돌려놓는다.

대화 박스의 ‘OK’와 ‘취소' 버튼은 페이지 번호 매김 버튼처럼 작동하기 때문에 비슷한 인터렉션 패턴을 따라야 한다. 그뿐만 아니라, 좌우 방향 패턴은 서양에서 익숙한 것이다. 주된 액션을 오른쪽에 놓고 보조 액션을 왼쪽에 두면 사용자가 대화 박스를 더 쉽고 직관적으로 이해할 수 있다.

3.3 사용자에게 효율적인 Task 플로우

대화 박스의 오른쪽 하단 모서리에 있는 버튼은 구텐베르크 다이어그램(Gutenberg Diagram)을 따르는 것이기 때문에 클릭하기 더 쉽다. 구텐베르크 다이어그램에서 오른쪽 하단 영역은 터미널 영역이다. 이곳은 사용자의 눈이 스캔을 끝날 때의 영역이다. 이곳에 버튼을 두면 사용자가 마지막으로 수행할 주된 액션을 볼 수 있다. 이는 비주얼을 향상할 뿐만 아니라 시각적 흐름을 개선하고 테스크 흐름도 개선한다. 사용자는 스캔할 때 주된 액션 버튼을 스킵하지 않는다. 스캔이 끝나면 바로 그 버튼을 클릭할 수 있다.

사용자의 시선이 주된 액션 버튼에서 끝나기 때문에, 대화 박스를 스캔하고 동작을 수행하는 것은 빠르고 쉽다.

4. 버튼을 구석에 둬야 할까? 함께 둬야 할까?

디자이너가 궁금해하는 다른 질문은 모서리에 둘지 함께 둘 지에 대한 것이다. 주, 보조 액션을 대화 박스 구석에 배치하면 왼쪽과 오른쪽으로 탐색하는 방향과 일치한다. 하지만 ‘OK’와 ‘취소' 버튼은 페이지 번호 매기는 버튼과 완전히 똑같지 않기 때문에 방향 매핑을 엄격하게 따를 필요는 없다. 때때로 좋은 영향보다 해를 끼칠 수 있다.

버튼 사이를 시각적으로 크게 분리시키면 액션을 비교하는 것이 어렵고 한 액션을 다른 액션과 분리시킨다.

사용자가 실행 취소를 할 수 없는 중요한 작업을 수행할 때, ‘OK’ 버튼과 ‘취소' 버튼을 같이 보는 것이 중요하다. 이 경우 ‘취소' 버튼이 ‘이전'버튼처럼 작동할 수 있지만, 변경을 방지하는 안전 버튼 역할을 하기 때문에 더 중요하다.

맨 왼쪽 구석에 ‘취소' 버튼을 두는 것이 위험한 이유는 사용자가 두 버튼 사이에 시각적 분리가 크기 때문에 사용자가 간과할 수 있다는 점이다. ‘취소’ 버튼과 ‘OK’ 버튼을 함께 두면 두 버튼을 모두 쉽게 볼 수 있다. 이를 통해 한 번의 시선으로 두 가지 행동을 비교하여 가장 좋은 액션을 선택할 수 있다.

5. 결론

디자이너는 사용자가 읽어야 할 중요한 메시지나 중요한 행동을 해야 할 때 주로 대화 박스를 사용한다. 버튼을 두는 순서는 사용자가 선택한 액션에 영향을 줄 수 있다. 명확하고 효과적으로 버튼을 배치하면 사용자가 잘못된 동작을 선택하거나 실수하지 않는다.

버튼 배치도 중요하지만, 버튼의 시각적 무게와 레이블도 주의를 기울이자. 모든 디자인 측면은 대화 박스를 스캔할 때 작용한다. 이제 왜 ‘OK’ 버튼이 오른쪽에 있어야 하는지 이해했으니, 플랫폼 일관성에 대한 더 좋은 레퍼런스가 생겼다.

저자 : anthony
원문 링크: https://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/