사람들은 습관적으로 버튼을 누릅니다. 버튼의 위치에 따라 의도치 않게 취소 버튼을 눌러 작업을 반복하는 일이 생길 수 있습니다. UX에서는 버튼 위치를 어떻게 선택하는지 두 가지 관점을 소개해 보겠습니다.
이 글을 읽을 때 "특정 행동을 유도하는 버튼"에 기준을 두면 이해하는 데 도움이 될 것입니다. 특정 행동은 다음에 수행할 행동일 수 있고 상대적으로 중요한 작업일 수 있습니다. 이 글에서는 이 행동 유도 버튼을 작업 버튼이라고 명칭하겠습니다.
작업 버튼의 위치를 결정하는 데는 두 가지 관점이 있습니다.
인지 관점
인지심리학 관점
이 두 가지 관점에 대해 자세히 알아보겠습니다.
1. 인지 관점
'인지'는 버튼을 보고 이해한 다음 행동을 결정하는 것을 말합니다. 저는 인지심리학보다 좀 더 '직감적'인 사고 과정으로 이해했습니다.
시선의 흐름=글의 흐름 한국은 글을 왼쪽에서 오른쪽으로 읽습니다. 자연스럽게 왼쪽에서 오른쪽으로 시선이 이동하기 때문에 중요한 작업버튼을 시선이 먼저 닿는 왼쪽에 두는 것입니다. 그렇게 하면 [취소] 버튼을 읽지 않아도 [확인] 버튼을 누를 수 있게 됩니다. *이 내용은 뒤에서 다룰 인지심리학 관점에서는 다르게 활용됩니다.
말의 순서: 선 긍정-후 부정 말을 하거나 생각을 할 때 '선 긍정-후 부정'의 순서(예: 할까, 말까?)이기 때문에 긍정 버튼을 먼저 배치한다고 합니다.
인지 관점에서는 작업버튼을 '왼쪽'에 둡니다.
2. 인지심리학 관점
'인지심리학'은 인지 과정에서 뇌가 어떻게 정보를 처리해서 행동을 결정하는 것을 연구하는 학문입니다. 저는 직감 뒤에 오는 '뇌의 정보처리 과정'으로 이해했습니다.
시선의 흐름=글의 흐름 시선의 흐름이 왼쪽에서 오른쪽으로 흐르기 때문에 자연스럽게 마지막에 작업버튼을 오른쪽에 둡니다. 인지 관점과 이유는 동일하지만, 확인-취소 버튼을 배치했을 때 확인→취소→확인으로 시선이 다시 이동하기 때문에 시선의 이동이 불필요하다고 본 것입니다.
Right의 중의적 의미 오른쪽을 영단어로 Right라고 씁니다. Right는 긍정의 의미(옳은)와 오른쪽을 의미합니다. 따라서 오른쪽에 긍정적인 버튼을 두기도 합니다.
스위치의 위치 스위치의 위치를 보면 OFF가 왼쪽이고 ON이 오른쪽입니다. 그 배치와 동일하게 오른쪽에 버튼을 배치합니다.
다른 컴포넌트의 순서(예: Pagination) 다른 컴포넌트를 예로 들어보겠습니다. 이전 버튼(<)은 왼쪽에, 다음 버튼은 오른쪽(>)에 위치합니다. 따라서 이전 작업버튼은 왼쪽, 다음 작업버튼을 오른쪽에 두는 것입니다. MUI의 Pagination
엄지 영역(Thumb Zone) 개인적으로 모바일 OS에서 인지심리학을 차용하는 이유에 대해 생각해 보았습니다. 모바일 기기에는 엄지손가락이 이동하는 영역을 엄지 영역(Thumb zone)이라고 합니다. 엄지 영역에 주요 작업버튼들을 위치시키면 좋습니다. 네비게이션 바가 밑에 있는 경우가 많은 이유도 그중 하나입니다. 그래서 다음 작업이 엄지에 쉽게 닿을 수 있기 때문에 취소 버튼을 멀리 두었을 가능성도 생각해 보았습니다.
버튼 위치가 헷갈리는 이유는 어찌 보면 당연합니다. OS 별로 다른 관점을 적용하고 있기 때문입니다.
윈도우는 작업버튼을 왼쪽에 배치합니다. 예를 들어, 확인-취소 순으로 배치합니다.
애플, 구글은 작업버튼을 오른쪽에 배치합니다. 예를 들어, 취소-확인 순으로 배치합니다.
저는 현재 프로젝트가 웹 기반이기 때문에 인지 관점을 사용하여 왼쪽에 작업버튼을 배치했습니다. 앱 기반이라면 인지심리학 관점에서 오른쪽에 작업버튼을 두었을 것입니다.
선택의 조언
하나로 통일하면 좋겠지만 두 가지 관점을 모두 사용하고 있는 상황에서 맞고 틀린 것은 없다고 생각합니다. 서비스의 특성에 따라 직감을 따르는 인지 관점으로 할지, 뇌의 정보 처리 과정을 따르는 인지심리학 관점으로 할지 선택하면 좋겠습니다. 그럼에도 웹, 모바일 유저를 모두 고려할 경우 고민이 될 수 있습니다. 그럴 때는 어떤 관점을 선택하든 중요도에 따라 버튼 컬러를 다르게 해서 시각적으로 중요도를 분리하면 더 좋을 것 같습니다. 하나의 요소로만 문제를 해결하지 않고 다른 요소도 복합적으로 사용한다면 더 좋은 UX를 만들 수 있을 것이라고 믿습니다.
