아이핀 ID를 신규 발급받으려는 A씨. 약관 동의 후 캡챠 코드를 입력하고, ID와 비밀번호, 이름, 주민등록번호, 이메일 등 개인 정보를 모두 입력했다. 그리고 확인 버튼을 선택한다는 것이 옆에 있는 취소 버튼을 눌러버렸다. 아차, 싶었지만 이미 늦어버렸다.

대체 내가 왜 취소를 눌렀지?

확인과 취소 중에 하나를 선택하는 것뿐인데 대체 왜 이런 실수를 하는 것일까? 여기에는 습관이 반영되었을 수 있다. 버튼의 메시지를 읽고 판단한 것이 아니라 확인 버튼이 있을 법한 익숙한 위치를 무의식적으로 선택했고, 실제 버튼의 위치가 예상한 것과 달랐던 것이다. 실수로 인해 발생하는 손실이 크지 않다면 넘길 수 있는 상황이지만, 시간과 노력을 들인 화면을 잃었을 경우 사용자가 겪어야 하는 심적 데미지는 무시하기 어렵다. 이로 인해 발생한 불쾌한 감정이 고스란히 서비스에 이입될 가능성이 크기 때문이다. 사용자가 버튼을 선택할 때 어떤 습관을 가지고 있는지 고민이 필요한 이유이다.   

누군가는 확인 버튼이 오른쪽에 있다고 생각하고, 

다른 누군가는 왼쪽을 생각한다.

버튼의 위치에 대한 논쟁은 오래되었지만 여전히 표준화된 규칙은 마련되어 있지 않다. 지금 떠올려보자. 이제까지 보아왔던 수많은 [확인]-[취소] 버튼 중에 확인 버튼은 어느 쪽에 있었을까. 만약 익숙한 방향이 떠올랐다면 다음의 요인이 영향을 미쳤을 수 있다. 

① 사용하는 운영체제(OS)

데스크탑 운영체제의 경우 마이크로소프트의 Windows는 확인 버튼을 왼쪽에, 애플의 macOS는 오른쪽에 배치한다. 다만 1980년대부터 지금까지 Windows가 데스크탑 점유율 1위 자리를 차지하고 있고, 현재에도 84%의 점유율을 가지고 있는 것으로 보았을 때 Windows가 사용하는 [확인]-[취소] 규칙이 사용자들의 습관에 많은 영향을 주었을 것이라고 짐작할 수 있다. 

② 긍정과 부정의 관습적 인식

우리는 문장에서 긍정적인 단어를 먼저 말하고, 부정적인 단어를 다음에 말하는 것에 익숙하다. 예를 들어 '예, 아니오', '찬성, 반대', '좋아, 싫어?', '먹었어? 안 먹었어?' 등과 같이 긍정의 단어가 앞에 왔을 때 문장을 안정적으로 인식한다. 그렇기 때문에 확인과 취소의 경우에도 긍정을 나타내는 확인이 앞서는 것이 자연스러운 흐름으로 느껴질 수 있다. 

이와 반대되는 인식이 또한 존재한다. 부정적인 행동은 왼쪽으로, 긍정적인 행동은 오른쪽에 있다는 인식이다. 구글은 이를 근거로 긍정을 의미하는 확인 버튼을 오른쪽으로 배치하였다. 어학적으로 살펴보면 오른쪽의 의미는 '옳다, 바르다'에서 왔고, 왼쪽은 '삐뚫어지다, 꼬이다'라는 뜻의 '외다'에서 파생되었다. 

영어에서도 오른쪽을 뜻하는 Right은 '맞다'의 의미를 가지고 있고, 왼쪽인 Left는 '쓸모없다'라는 뜻의 'Lytf'에서 파생되었다는 점을 생각해본다면 오른쪽을 긍정으로 왼쪽을 부정으로 인식하는 것은 다양한 문화권에서 이어진 오래된 경향이라고 볼 수 있다.

③ 이전과 다음의 프로세스 개념

왼쪽과 오른쪽은 흔히 이전과 다음의 메타포로 사용된다. 지하철의 이전 역과 다음 역을 표기할 때나 노래를 듣다가 이전 곡과 다음 곡으로 이동할 때, 브라우저 창의 이전 페이지와 다음 페이지를 표기할 때에도 왼쪽과 오른쪽 방향을 사용한다. 사용자들이 현실에서 인식하는 방향의 이미지는 나열된 버튼을 인지하는 방식에도 영향을 준다. 즉 방향을 기준으로 이전으로 돌아가는 취소 버튼은 왼쪽으로, 다음으로 진행되는 확인 버튼은 오른쪽에 있는 것이 익숙하다고 여겨질 수 있다. 

④ LTR (Left to Right) 읽기 방식

LTR 언어권에서는 왼쪽에서 오른쪽으로 글을 읽는다. 정보의 방향이 오른쪽을 향하기 때문에 정보의 종료 지점은 자연스럽게 오른쪽이 된다. 즉 버튼을 정보로 대입해본다면 모든 선택지를 읽고 확인 결정을 내리는 지점은 오른쪽일 때 자연스럽다. 정보의 종료 지점과 결정 지점이 동일한 [취소]-[확인] 규칙에서 정보의 흐름이 안정적으로 느껴지는 이유이다. 

사용자가 실수하지 않도록.

버튼 디자인을 앞두고 고민이 된다. 플랫폼 기반의 프로그램의 경우에는 해당 플랫폼에서 제시하는 규칙을 따라가면 되지만, 어떤 디바이스에서 접근하는지 알 수 없는 웹 페이지일 경우에는 어떤 사용자를 기준으로 삼아야 하는지 결정을 내리기 쉽지 않다. 사용자에 따라 익숙한 규칙이 다르다는 것은 어떤 규칙을 선택하더라도 불편을 느끼는 사용자가 존재한다는 것을 말한다. 표준화된 규칙이 없는 지금, 어떤 기준을 정할 것인지에 대한 논의보다는 사용자가 습관으로 인해 실수하지 않도록 안전장치를 마련하는 방향의 고민이 필요해 보인다. 

확인보다 구체적인 메시지를 제시한다.

사용자는 텍스트에 주의를 기울이지 않는다. 특히 질문에 대한 답을 선택할 경우, 질문이 무엇인지 정확히 파악하지 못하고 일단 확인 버튼을 누르는 경우가 발생한다. 질문을 읽지 않고도 버튼이 무엇을 의미하는지 알 수 있도록 구체적인 행동을 버튼에 안내하는 것이 좋다.

버튼에 구체적인 행동을 기재하여 사용자가 선택한 버튼이 무엇을 의미하는지 정확히 인지할 수 있도록 한다.

시각적으로 강조한다.

사용자가 버튼을 신중하게 선택하지 않는다는 것을 알아야 한다. 유사한 디자인의 버튼이 나열되었을 때 사용자가 실수할 확률은 높아진다. 특히 사용자의 행동을 유도할 필요가 있거나, 선택할 가능성이 높은 중요 버튼은 컬러와 사이즈 등에서 시각적인 차이를 두어 사용자의 주의를 환기시키고 집중할 수 있도록 한다.

페이지를 빠져나갈 경우, 철회할 수 있는 기회를 제공한다.

회원가입, 본인인증, 게시판 글쓰기 등 사용자의 노력이 들어간 페이지에서 사용자가 취소 버튼을 선택했을 때 다시 한번 확인하는 메시지를 노출한다. '이 페이지에서 나가시겠습니까? 변경 사항이 저장되지 않을 수 있습니다.'와 같은 메시지를 통해 선택으로 인해 발생하는 상황을 안내하고, 만약 의도하지 않을 경우 실수로 인해 사용자의 경험이 망가지는 상황을 방지한다. 

페이지를 이탈할 경우에 발생하는 상황을 구체적으로 안내하였다. ⓒ Apple

사용자가 버튼을 잘 못 선택했다면 주의 깊게 확인하지 않은 개인의 잘 못일 수 있다. 하지만 만약 같은 지점에서 사용자들의 실수가 반복된다면 그것은 서비스가 개선해야 하는 불편이다. 사용자는 버튼을 통해 서비스와 대화한다. 무심히 지나쳐왔던 버튼이 사용자와 어떤 대화를 하고 있는지 유심히 지켜볼 필요가 있다. 

​l 에디터 소개  NHN Ent. AD, UI/UX lab은 더 즐겁고 자연스러운 서비스를 연구합니다.