[UX/UI 아티클] 1. 대화 상자의 '확인' 버튼이 오른쪽이 가장 좋은 이유

[UX/UI 아티클] 

1. 대화 상자의 '확인' 버튼이 오른쪽이 가장 좋은 이유

 

디자이너와 기획자들은 종종 대화 상자에 '확인'과 '취소'버튼을 어디에 놓아야 할지 질문을 한다. '확인' 버튼은 작업을 완료하는 주요한 행위이다. '취소'버튼은 작업을 완료하지 않고 사용자를 원래 화면으로 되돌리는 보조행위이다. 그 기능에 근거하여 버튼을 배치하는 가장 좋은 순서는 무엇인가? '확인' 버튼은 '취소'버튼 앞에 와야 하는가? 아니면 그 뒤에 와야 하는가?

 

ㅣ플랫폼의 일관성으로만은 충분하지 않다.

 

많은 사람들의 다음과 같은 플랫폼의 규약을 해답으로 언급한다. 이것이 그 문제 대한 해결책으로 보일지 모르지만, 실제로는 그렇지 않다. 어떤 배치가 사용자들에게 더 나은지 그리고 왜 효과적인지에 대한 해답은 없다. 일관성을 위해 플랫폼 규약을 따르라는 제안은 충분하지 않고 디자이너와 기획자들에게 해답은 남지 않는다. 

 

"Consistency(일관성)"은 디자이너들 사이에서 많이 쓰이는 말이다. 이것은 사용자들이 직면하고 있는 디자인 문제에 깊이 생각하지 않기 위해 사용하는 일반적인 핑계다. 설계 규칙이 왜 존재하는지 모르는 경우에 무슨 이점이 있는가?

 

특정 디자인 협약이 사용자에게 해롭다면? 디자이너들은 일관성을 위해 맹목적으로 따라와 하는가? 설계자들이 플랫폼 설계 일관성을 모든 문제 대한 해결책으로 이용하기를 원하기 때문에 나쁜 디자인 관행이 지속되어야 하는가?

 

오늘날 널리 사용되는 플랫폼 설계 협약은 사용자들에게 적용되어야 하기 때문에 있다. 그러나 여기서 요점은 플랫폼 설계 일관성이 어떤 일을 하는 유일한 이유로서 디자이너 혹은 기획자를 만족시켜서는 안 된다는 것이다. 다른 방법이 아닌 한 방법으로 사용자 인터페이스를 설계해야 하는지 이유를 이해하는 것이 중요하다.

 

ㅣ 버튼 배치 문제

 

사람들은 액션 버튼이 시각적인 강조와 명확하고 뚜렷한 라벨을 제공함으로써 더 눈에 띄게 만드는 것이 그 배치보다 더 중요하다고 주장할 수 있다. 액션 버튼의 시각적 강조와 라벨은 고려해야 할 중요한 설계 측면이지만, 이것이 유일한 측면은 아니다. 

 

한 가지 디자인 측면에만 초점을 맞추는 것은 부주의한 디자이너의 행동이다. 꼼꼼한 기획자와 디자이너는 모든 설계 측면이 사용자에게 어떤 영향을 미치는지에 대해 생각할 것이다. 그리고 기획자와 디자이너가 어려운 것은 메인 액션 버튼과 보조 액션 버튼을 어떻게 배치되는가이다. 그래서 기획자와 디자이너들 사이에서 '확인과 취소'버튼 논쟁이 인기 있는 것이다. 

 

ㅣ'확인' 버튼이 오른쪽에 있어야 하는 이유

 

당신이 지난 플랫폼 규약 논쟁을 얘기할 때, 어떤 배치가 가장 적합한지 질문하게 될 것이다. 당신은 사용자에게 어떤 영향을 미치는지 분석하여 이 문제를 해결할 수 있다. 

 

ㅣ덜 시작적인 고정

 

기획자 혹은 디자이너가 흔히 말하는 가정이 사실인 확인할 필요가 있다. 일부 기획자 혹은 디자이너는 보조 액션 버튼보다 메인 액션 버튼이 왼쪽에 위치하는 것이 더 가깝고 따라서 클릭하는 데 시간이 덜 걸리기 때문에 사용자에게 도 좋다고 믿는다. 

 

이는 말이 되지만 사용자가 어떤 조치를 취할 것인지를 선택하기 전에 모든 선택사항을 살펴보게 된다는 사실을 무시할 수는 없다. 이는 대부분의 사용자가 옆에 있는 보조 액션 버튼도 보지 않고 메인 액션 버튼을 맹목적으로 클릭하지는 않다는 것을 의미한다. 

 

먼저 왼쪽에서 1차 액션 버튼을 보고 오른쪽에서 2차 액션 버튼을 보게 될 것이다.  그러고 나서 사용자들은 그것을 클릭하기 위해 다시 1차 액션 버튼으로 눈을 옮길 것이다. 이렇게 하면 여러 방향으로 총 3개의 시각적 고정 장치가 생성된다. 

왼쪽의 '확인' 버튼을 사용하면 시각적 고정이 더욱 다양해지고 여러 방향으로 흐릅니다.

 

오른쪽의 '확인'버튼을 사용하면 시각적 고정이 적고 한 방향으로 흐릅니다.

이를 대화 상자 오른쪽에는 1차 액션 버튼과 왼쪽의 2차 액션 버튼과 비교한다. 사용자는 보조 액션 버튼에 대한 시선으로 시작하고, 메인 액션 버튼에 대한 시선으로 이동하여 버튼을 클릭한다. 이것은 한 방향으로 총 두 개의 시각적 고정이 만들어져 사용자에게 더 빠른 시작적 흐름을 제공한다. 

 

ㅣ예상되는 버튼 기능에 매핑

 

사용자는 보조 액션 버튼을 클릭하면 애플리케이션이 아무것도 하지 않고 원래 화면으로 돌아가기를 기대한다. 따라서 '취소'버튼은 '뒤로' 버튼과 같은 기능을 한다. 

 

사용자는 메인 액션 버튼을 클릭하면 애플리케이션이 버튼에 표시되는 동작을 수행하여 다음 화면으로 이동하기를 기대한다. 따라서 '확인' 버튼은 '다음'과 같은 기능을 한다. 왼쪽에 보조 액션 버튼과 오른쪽에 메인 액션 버튼을 배치하면 사용자가 기대할 수 있는 '뒤로' 및 '다음' 버튼 기능에 매핑된다. 

 

이것은 페이지 넘김 버튼을 배치하는 방법과 유사하다. 사용자를 다음 페이지로 데려가는 버튼은 오른쪽에 있고, 사용자를 이전 페이지로 다시 이동시키는 버튼은 왼쪽에 있다. 이 버튼 배치는 사용자의 왼쪽에서 오른쪽으로 읽기 및 탐색 방향에 매핑되기 때문에 작동한다. 여기서 오른쪽은 진행방향이고 왼쪽은 회귀 방향이다. 

 

'확인'은 다음 화면으로 사용자를 안내하고 '취소'는 사용자를 원해 화면으로 되돌린다. 

대화 상자의 '확인'과 '취소' 버튼은 페이지 넘김 버튼처럼 작동함으로 유사한 상호작용 패턴을 따라야 한다. 그뿐만 아니라 좌우 방향 패턴은 서구 세계에서 사용자가 익숙한 것이다. 메인 액션 버튼을 오른쪽에 배치하고 보조 액션 버튼을 왼쪽에 배치하면 대화 상자 버튼을 보다 쉽고 직관적으로 이해할 수 있다. 

 

ㅣ 사용자에게 보다 효율적인 작업 흐름 제공

 

대화 상자의 오른쪽 하단 모서리에 있는 버튼은 구텐베르크 다이어그램에 따르기 때문에 사용자가 클릭하기 더 쉽다. 구텐베르크 다이어그램에서 오른쪽 아래 영역은 종착점이다.  이것은 사용자의 눈이 스캔을 마치며 끝내는 영역이다. 

 

버튼을 종착점에 놓으면 사용자가 마지막으로 수행해야 하는 기본 동작을 볼 수 있다. 이렇게 하면 시각적 흐름뿐만 아니라 작업 흐름도 개선된다. 사용자는 스캔할 때 메인 버튼을 건너뛰지 않는다. 그래서 사용자의 눈이 버튼을 지나갈 때 사용자의 눈이 그 위에 닿아 즉시 바로 클릭할 수 있다. 

 

사용자의 시선이 메인 액션 버튼에서 끝나기 때문에 대화 상자를 스캔하고 빠르고 쉽게 처리 할 수 있다. 

 

ㅣ 코너에 있는 버튼 아니면 함께 있는 버튼?

 

디자이너와 기획자가 궁금해하는 또 다른 질문은 종종 버튼을 모서리에 배치해야 하는지 아니면 버튼들을 함께 배치해야 하느냐는 것이다. 대화 상자의 모서리에 메인 액션 버튼 및 보조 액션 버튼을 배치하면 왼쪽 및 오른쪽 탐색 방향으로 잘 매핑된다. 그러나 '확인' 및 '취소' 버튼은 탐색 버튼이 아니므로 방향 매핑을 따라갈 필요는 없다. 때때로 그것은 득 보다 해를 끼칠 수 있다. 

버튼 사이의 큰 시각적 분리는 동작을 비교하기 어렵게 만들고 한 동작을 다른 동장과 분리 시킨다. 

 

애플리케이션이 사용자가 취소할 수 없는 중요한 조치를 수행하려는 경우 '확인' 버튼과 함께 '취소'버튼을 볼 수 있어야 한다. 이 경우 '취소' 버튼은 ' 이전' 버튼처럼 기능할 수 있지만 변경을 방지할 수 있는 안전 버튼 역할을 하기 때문에 더 욱 중요하다. 

 

가장 왼쪽 모서리에 '취소' 버튼을 배치하면 두 버튼이 크게 구분되어 사용자가 버튼을 간과할 수 있다. '취소' 버튼과 함께 '확인' 버튼을 함께 사용하면 사용자가 한 번의 시선으로 두 가지 동작을 보다 쉽게 보고 비교할 수 있어 가장 적합한 동작을 선택할 수 있다. 

 

ㅣ 결론

 

기획자나 디자이너는 사용자가 읽어야 할 중요한 메시지나 취해야 할 중요한 조치가 있을 때 대화 상자를 자주 사용한다. 버튼을 배치하는 순서는 사용자가 선택한 동작에 영향을 줄 수 있다. 사용자가에게 명확하고 효율적인 순서로 버튼을 배치하면 잘못된 동작을 선택하고 실수를 저지르는 것을 방지할 수 있다. 

 

버튼 배치는 중요하지만 버튼의 시각적 강조와 라벨에도 주의를 기울여야 한다. 사용자가 대화 상자를 스캔할 때 이러한 모든 디자인 측면이 적용된다. 'OK'버튼이 오른쪽에서 가장 잘 작동하는 이유를 이해했으므로 플랫폼 일관성 버튼보다 참조할 수 있는 논거를 더 잘 갖추게 될 것이다. 

 

 

원문 참조

https://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/

Why 'Ok' Buttons in Dialog Boxes Work Best on the Right

ㅣ 내 생각

 

OK 혹은 확인 버튼이 오른쪽에 위치해야 하는지 왼쪽에 위치해야 하는지에 관해서는 많은 논쟁거리를 만들어내고 있습니다. 무엇이 정답이라고 명확히 누군가에도 들은적도 없고 정답이라고 명확히 설명하는 글들이 있기는 하지만 그것 또한 많은 반박을 만들어 내고 있습니다. 위의 원문 아티클 댓글에도 이 글의 생각과 반대된다는 댓글들이 있습니다. 저와 함께 일하는 디자이너분은 버튼의 위치가 중요한 것은 아니라고 했습니다. 더 큰 차원에서의 UX를 고민하는게 정답이라고 했습니다. 

제 생각에 하나의 사이트를 운영한다면 거기에 맞게 구성원들과 합의하여 일관성은 유지되어야 한다는 것입니다. 

 

이 글은 허접하지만 번역기를 이용하여 영문 아티클을 번역한 글입니다.