3.1 덜 시각적인 고정

    3.2 예상되는 버튼 기능 발견

디자이너들은 종종 대화 상자에서 ‘OK’와 ‘취소' 버튼이 어디에 있어야 하는지 의문을 가진다. ‘OK’ 버튼은 테스크를 완료하기 위한 핵심 동작이다.
‘취소' 버튼은 사용자가 작업을 완료하지 않고 원래 스크린으로 돌아가기 위한 보조 동작이다. 기능을 기준으로 무엇이 가장 좋은 배치일까? ‘취소' 버튼은 ‘OK’ 버튼 앞에 와야 할까? 뒤에 와야 할까? 

많은 사람들이 플랫폼 규칙을 따른다고 말했다. 이것이 그 문제를 해결해줄 것처럼 보이지만, 실제로 그렇지 않다. 어떤 배치가 사용자에게 더 잘 작동하는지, 왜 그런지 알려주지 않는다. 일관성을 위해 플랫폼 규칙을 따르겠다는 것은 충분하지 않고 디자이너들은 빈 손으로 남겨둔다.
‘일관성'은 디자이너들 사이에서 많이 쓰는 단어다. 사용자가 직면한 디자인 문제에 대해 깊이 생각하지 않아도 되는 핑계로도 많이 쓰인다. 디자인 규칙을 왜 따르는지 모르면 어떤 이점이 있을까?
어떤 디자인 규칙이 사용자에게 해로울 때는 어떻게 해야 할까? 일관성을 위해 무조건 따라야 할까? 디자이너가 모든 문제를 해결하는 방법으로 플랫폼 디자인 규칙을 이용한다는 이유로 안 좋은 디자인 규칙을 계속 써야 할까?
사용자를 위해 널리 사용되는 특정 플랫폼 디자인 규칙이 있다. 하지만 여기서 중요한 것은 플랫폼 디자인의 일관성이 디자이너의 유일한 해결책이 되어서는 안 된다. 다른 방법과 달리 한 가지 방법으로 사용자 인터페이스를 디자인해야 하는 이유를 이해하는 것이 중요하다. 

어떤 사람은 액션 버튼에 시각적인 무게와 명확하고 뚜렷한 라벨을 주는 것이 배치보다 중요하다고 말할 수 있다. 액션 버튼의 시각적인 무게와 라벨은 고려되어야 할 중요한 디자인 요소지만, 유일한 측면은 아니다.
하나의 디자인 측면에만 초점을 맞추고 다른 디자인 측면은 초점을 맞추지 않는 것은 부주의한 디자이너들이 하는 행동이다. 세심한 디자이너들은 모든 디자인 요소가 사용자에게 어떤 영향을 미칠지 생각할 것이다. 어떻게 주요 작업과 보조 작업이 배치되는지 보여주는 것은 디자이너가 알아내기 힘들어하는 것이다. 그래서 ‘Ok/취소' 버튼 논쟁이 디자이너 사이에서 인기 있는 것이다. 

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

3.1 덜 시각적인 고정
디자이너의 일반적인 가정이 사실인지 확인해야 한다. 일부 디자이너들은 보조 액션보다 주된 액션을 왼쪽에 두는 것이 더 가깝고 클릭하는 시간이 적기 때문에 사용자에게 더 좋을 것이라고 생각한다.
말은 되지만, 사용자가 어떤 행동을 하기 전에 모든 옵션을 본다는 사실을 무시할 수 없다. 즉, 대부분의 사용자가 옆에 있는 보조 액션 버튼을 보지 않고 주된 액션 버튼을 맹목적으로 클릭하지는 않을 것이다.
먼저 왼쪽에서 주된 액션 버튼을 보고, 오른쪽에서 보조 액션을 보게 될 것이다. 그러고 나서 다시 클릭하려고 주된 액션으로 시선을 옮길 것이다. 이렇게 하게 되면 여러 가지 방향으로 3번 시각적 고정이 이뤄진다. 

3.2 예상되는 버튼 기능 발견
사용자가 보조 액션 버튼을 클릭할 때, 아무것도 하지 않고 원래 화면으로 돌아간다고 생각한다. 즉 ‘취소' 버튼은 ‘뒤로 돌아가기' 버튼과 같은 기능을 한다.
주된 액션 버튼을 클릭할 때는, 버튼이 말하는 동작을 수행한 후, 다음 화면으로 넘어간다고 생각한다. 즉 ‘OK’ 버튼은 ‘다음'버튼과 같은 기능을 한다. 보조 액션 버튼을 왼쪽에 놓고, 주된 액션 버튼을 오른쪽에 놓는 것은 사용자가 ‘뒤로 가기'와 ‘다음' 버튼 기능으로 예상할 수 있다.
이는 페이지 번호를 매기는 버튼을 두는 방법과 비슷하다. 사용자를 다음 페이지로 이동하는 버튼은 오른쪽에 있고, 전 페이지로 돌아오게 하는 버튼은 왼쪽에 있다.
이 버튼은 왼쪽에서 오른쪽으로 읽는 방향과 와 탐색 방향에 매핑되기 때문에 작동하는데, 여기서 오른쪽은 진행 방향이고 왼쪽은 후퇴 방향이다. 

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

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

5. 결론
디자이너는 사용자가 읽어야 할 중요한 메시지나 중요한 행동을 해야 할 때 주로 대화 박스를 사용한다. 버튼을 두는 순서는 사용자가 선택한 액션에 영향을 줄 수 있다. 명확하고 효과적으로 버튼을 배치하면 사용자가 잘못된 동작을 선택하거나 실수하지 않는다.
버튼 배치도 중요하지만, 버튼의 시각적 무게와 레이블도 주의를 기울이자. 모든 디자인 측면은 대화 박스를 스캔할 때 작용한다. 이제 왜 ‘OK’ 버튼이 오른쪽에 있어야 하는지 이해했으니, 플랫폼 일관성에 대한 더 좋은 레퍼런스가 생겼다.

버튼은 간단하지만 유저와 상호작용을 많이하는 요소입니다. 버튼의 위치에 정답이 정해진 것은 아니지만 부정적인 버튼은 왼쪽, 긍정적인 버튼은 오른쪽에 위치된 경우를 많이 볼 수 있는데, 그 이유에 대해 알 수 있는 아티클이라 소개해드렸습니다. 

디독
d.dok.newsletter@gmail.com
- -
수신거부 Unsubscribe